AngularJS指令OnTheFlyテキストボックスと検証の作成

Question

指示文では、オンザフライでテキストボックスを作成し、それと同時に検証を行います。

texboxが正しく作成され、動作しています。

参照くださいplnker：
https://plnkr.co/edit/YJIwS8bD0w5e9LbWBtlJ?p=preview

が、エラーのdiv NG-ショーはディレクティブのpropErrPatternからcorretly生成されていません： '=' AND propErrReqr： '='。

私は少なくとも12の方法を試しましたが、何も機能しません。テンプレートが生成されます。textboxTemplate.html（告知NG-ショー= "propErrPattern || propErrReqr"）

<div class="form-group"> 
    <label for="{{value}}" class="control-label col-sm-4">{{label}}</label> 
    <div class="col-sm-8"> 
     <input type="text" 
       class="form-control" 
       id="{{value}}" 
       name="{{value}}" 
       ng-model="property" 
       ng-pattern="/^[a-z\d\-_\s]+$/i" 
       ng-minlength="{{lenMin}}" 
       ng-maxlength="{{lenMax}}" 
       ng-trim="true" 
       required /> 
     <!-- NOT GENERATING CORRECTLY --> 
     <!-- NOT GENERATING CORRECTLY --> 
     <p class="error" ng-show="propErrPattern || propErrReqr" > 
      <b>Required. Length:{{lenMin}}-{{lenMax}} Characters:</b> Letters, Numbers, Dash, Underscore, Space 
     </p> 
    </div> 
</div> 

<text-box 
    label="First Name" 
    value="FirstName" 
    property='FirstName' 
    propErrPattern='FirstName.$error.pattern' 
    propErrReqr='FirstName.$error.required' 
    lenMin='3' 
    lenMax='15'> 
</text-box> 

：私はでディレクティブを呼び出す形で

<p class="error" ng-show="propErrPattern || propErrReqr"> 
    <b class="ng-binding">Required. Length:- Characters:</b> Letters, Numbers, Dash, Underscore, Space 
</p> 

<!-- instead of generating --> 
<!-- instead of generating --> 
<p class="error" ng-show="FirstName.$error.pattern || irstName.$error.required"> 


app.directive('textBox', function() { 
    return { 
     scope: { 
      label: '@label', 
      value: '@value', 
      property: '=', 
      propErrPattern: '=', 
      propErrReqr: '=', 
      lenMin: '@lenMin', 
      lenMax: '@lenMax', 
     }, 
     restrict: 'E', 
     replace: true, 
     templateUrl: 'textboxTemplate.html' 
    }; 
}); 

を

Answer 1

あなたの実装にはいくつかの問題があります。この指示は、次のようになります。

<text-Box label="First Name" value="FirstName" property='FirstName' 
prop-err-pattern='myForm.FirstName.$error.pattern' 
prop-err-reqr='myForm.FirstName.$error.required' lenMin='3' lenMax='15'> 
</text-Box> 

あなたのディレクティブでキャメルケースである特性を破線経由で設定されている必要があることに注意してください「 - 」名前。 propErrPatternはprop-err-patternになります。 次にpropErrPatternとpropErrReqrの値は、フォームの名前（この場合は 'myForm'）で始まる必要があります。

これらの2つの変更は、正常に動作するはずです。