Angular ng-requiredがカスタムディレクティブで動作しない

Question

Angularjsバージョン1.5を使用してフォームの入力を検証しています。

• NG-必要なすべての入力を検証するために使用され、しかし

を必要とそのコンボをレンダリングするカスタムディレクティブで作業していません。コンボは、 'listId'という名前で渡されたパラメータに基づいて項目を取得します。次に、ng-repeatを使用して 'lookupItems'を反復処理します。 ngModelのように何かが欠けていると思います。なぜ、どのように実装するのですか？

コンボディレクティブ：

app.directive('combo', function($http) { 
    return { 
     restrict: 'AE', 
     template: '<div class="input-group"> <select ng-model="selectedItem">' + 
      '<option ng-repeat="option in lookupItems" value={{option.ListValueID}}>{{option.Translation.Value}}</option></select>' + 
      ' {{selectedItem}} </div>', 
     replace: true, 
     scope: { 
      listId: '=', 
      defaultItem: '=', 
      selectedItem: '=' 
     }, 
     controller: function($scope) { 
      $http({ 
       method: 'GET', 
       url: '/home/listvalues?listid=' + $scope.listId 
      }).then(function(response) { 
       $scope.lookupItems = response.data; 
      }, function(error) { 
       alert(error.data); 
      }); 
     }, 
     link: function(scope, element, attrs) {} 
    }; 
}); 

HTMLビュー：はそのセットの属性」に基づいてブールにNG-必要なレンダリングするコントロールの種類が含まれている属性を反復処理されます。必須です。これは本当です。

<form name="profileAttributesForm" ng-controller="metadataCtrl" class="my-form"> 
    <div ng-repeat="a in attributes"> 
     <div ng-if="a.DataType == 1"> 
      <input type="text" name="attribute_{{$index}}" ng-model="a.Value" ng-required="a.Required" /> 
      <span ng-show="profileAttributesForm['attribute_{{$index}}'].$invalid">Enter a Text</span> text : {{a.Value}} 
     </div> 

     <div ng-if="a.DataType == 4"> 
      <div combo list-id="a.LookUpList" name="attribute_{{$index}}" selected-item="a.Value" ng-required="a.Required"></div> 
      <span ng-show="profileAttributesForm['attribute_{{$index}}'].$invalid">lookup Required</span> Value from lookup: {{a.Value}} 
     </div> 
    </div> 
</form> 

私は、例示の目的のためにそれを提供してい形で反復処理された属性のサンプル（$ scope.attributes）、：

[{ 
    "AttributeID": 1, 
    "DataType": 4, 
    "NodeID": 0, 
    "Name": "Name", 
    "Description": null, 
    "LookUpList": 1, 
    "SortAscending": false, 
    "Required": true, 
    "DefaultValue": "1", 
    "Order": 1, 
    "Value": "" 
}, { 
    "AttributeID": 3, 
    "DataType": 1, 
    "NodeID": 0, 
    "Name": "Job Title", 
    "Description": null, 
    "LookUpList": 0, 
    "SortAscending": false, 
    "Required": true, 
    "DefaultValue": null, 
    "Order": 2, 
    "Value": "" 
}, { 
    "AttributeID": 4, 
    "DataType": 1, 
    "NodeID": 0, 
    "Name": "Email", 
    "Description": null, 
    "LookUpList": 0, 
    "SortAscending": false, 
    "Required": true, 
    "DefaultValue": null, 
    "Order": 3, 
    "Value": "" 
}] 

Answer 1

ngRequiredは、そのバリデータを設定するためにはngModelを同じ要素に設定してNgModelControllerをから取得する必要があります。それ以外の場合は、親フォームに影響を与えずに必須属性をオンまたはオフに設定するだけです。

フォームの状態（$ pristine、$ validなど）は、HTML ではなく、登録されたNgModelControllersによって決定されます。 ngModelがフォームの内部にリンクされると、コントローラが自動的に追加されます。例えば

• それはngModelが割り当てられていないため、この<input required type="text">は、これは必須です場合でも、フォームの有効性には影響しません。
• しかし、この<div ng-model="myDiv" required></div>は必須であり、ngModelが割り当てられているため影響を受けます。
  • シンプル1：
  あなたのケースでは

  、私は2つのソリューションを参照移動combo内ngRequiredとngModelと同じ要素にそれを追加します。このためには新しいスコープ変数を追加する必要があります。 isRequired

• 複合語：require: 'ngModel'を指示に追加し、これを機能させるために適切な変更を加えます。 この方法で、あなたはより大きな制御と柔軟性を得るでしょう。たとえば、道路の向こうにcomboにngModelOptionsを追加する場合はどうしますか？このソリューションを実装していない場合は、手動で追加する必要があります。

  あなたはWhat's the meaning of require: 'ngModel'?を読むことから始めることができます。これは、異なる例を含む素晴らしい質問/回答です。より詳細な説明については、Using NgModelController with Custom Directivesをご覧ください。補足として、Angular 1.5では、requireという構文が改善されました。$onInit and new "require" Object syntax in Angular componentsを参照してください。