エラーメッセージがあるフォームエレメントディレクティブは、AngularJS

Question

私は検証で入力ディレクティブ要素を作成しようとしています。 このディレクティブでエラーステータスを管理したいと思います。

3つのファイル

• Index.htmlとあります
• textValid.jsこのディレクティブを使用しています：ディレクティブのコードが含まれています
• textValid.html：私が作成したディレクティブのテンプレート

が含まれていますが、この指示文

textValid.js

App.directive("textValid", function() { 
    return { 
     restrict: "E", 
     templateUrl: "tpl/textValid.html", 
     require: "?ngModel", 

     scope: { 
      name: "@", 
      element: "=", 
      model: "=" 
     } 
    }; 
}); 

index.htmlを

<form name="edit_form_ctrl.contract_edit_form" action="#" novalidate > 
    <div class="row"> 
     <text-valid name="ncontract"model="edit_form_ctrl.contract.ncontract" 
        element="edit_form_ctrl.contract_edit_form.ncontract"> 
     </text-valid> 
    </div> 
</form> 

とテンプレートtextValid.html

<input type="text" name="name" ng-model="model" class="form-control" ng-required="true" value="{{model}}" /> 
    <div>pristine: {{element.$pristine}}</div> <!--is always undefined--> 
    <div>Invalid: {{element.$error}}</div> <!--is always undefined--> 
<span class="color-red" ng-if="element.$error.required &&!element.$pristine"> 
    {{curLang.field_mandatory}} 
</span> 

私は$エラーをチェックするための入力制御を取得しようとしていると$手付かずの値しかし、私はそれを達成することはできません。

私はすべてのドキュメントと本も読んでいますが、結果はあります。

誰かがそれを試みますか？

事前

Answer 1

を：

<input type="text" name="{{name}}" ng-model="model" class="form-control" ng-required="true" /> 

あなたは内部からngModelControllerにアクセスできるようになります。text-valid$scope.form[$scope.name]

カップルその他の注意事項：

1. ng-model属性でvalueの属性と要素を使用しては効果がありません。

2. require: '?ngModel'がディレクティブ定義にありますが、text-valid要素にはng-model属性がありません。これは正常ですが、要素にng-model属性がない限り、ngModelControllerは注入されません。

編集：

text-validがFormControllerにアクセスするには、あなたがそれを必要とし、それをバインドする必要があるだろう、スコープを隔離持っているので：

App.directive("textValid", function() { 
    return { 
     restrict: "E", 
     templateUrl: "tpl/textValid.html", 
     require: "^^form", 

     scope: { 
      name: "@", 
      element: "=", 
      model: "=" 
     }, 
     link: function($scope, elem, attr, FormCtrl){ 
      $scope.form = FormCtrl; 
      // now you should be able to access $scope.form[$scope.name] 
      // (you *might* need to put any initialization that accesses it inside a $timeout to wait for it to be rendered/bound) 
     } 
    }; 
}); 

テンプレートでは、あなたがしなければなりませんそれにアクセスできるように：

<div>pristine: {{form[name].$pristine}}</div> 
<div>Invalid: {{form[name].$error}}</div> 

Answer 2

のおかげで、このお試しください：あなたがそうのような入力要素のname属性の周り{{ダブルカーリーを}}追加する場合

<input type="text" name="name" ng-model="model" class="form-control" ng-required="true" value="{{model}}" /> 
    <div>pristine: {{form.name.$pristine}}</div> <!--is always undefined--> 
    <div>Invalid: {{form.name.$error}}</div> <!--is always undefined--> 
<span class="color-red" ng-if="element.$error.required &&!element.$pristine"> 
    {{curLang.field_mandatory}} 
</span>