Angular ng-erforderlich funktioniert nicht mit benutzerdefinierten Direktive

Question

Ich benutze Angularjs Version 1.5, um die Eingaben in meinem Formular zu validieren.

• ng-Bedarf verwendet wird, um die gesamte Eingabe bestätigen erforderlich

jedoch sein nicht mit einer benutzerdefinierten Richtlinie arbeiten, die eine Combo macht. Die Combo ruft die Elemente basierend auf dem Parameter "listId" ab. Dann iteriert es die 'lookupItems' mit ng-repeat. Ich denke, etwas fehlt wie NGModel. Warum und wie implementieren?

Die Combo-Richtlinie:

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) {} 
    }; 
}); 

der HTML-Ansicht: wird über Attribute Iterieren, die die Art der Steuerung enthält, zu machen, dann wird ihr Satz ng-erforderlich ist, um einen booleschen basierend auf ‚Attribut. Erforderlich 'was wahr ist.

<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> 

Probe von Attributen ($ scope.attributes), die in Form iteriert wird, Ich reicht es nur zu Veranschaulichungszwecken:

[{ 
    "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

Damit ngRequired seinen Validator einstellen es erfordert ngModel auf das gleiche Element gesetzt werden, um daraus zu erhalten, sonst wird es nur das erforderliche Attribut ein- oder ausschalten, ohne das übergeordnete Formular zu beeinflussen.

Ein Formularstatus ($ pristine, $ valid, etc) wird nicht von seinem HTML sondern von dem registrierten NgModelControllers bestimmt. Ein Controller wird automatisch hinzugefügt, wenn ein ngModel innerhalb des Formulars verknüpft ist.

• Zum Beispiel diese <input required type="text"> nicht die Gültigkeit der Form beeinflussen, auch wenn es erforderlich ist, da es nicht ngModel zu zugewiesen ist.
• Aber diese <div ng-model="myDiv" required></div> wird beeinflussen, da es erforderlich ist und ngModel zugewiesen hat.

In Ihrem Fall sehe ich zwei Lösungen:

• die einfache: bewegen ngRequired innen combo und es auf dem gleichen Element wie ngModel hinzuzufügen; Dazu müssen Sie auch eine neue Bereichsvariable hinzufügen, z. isRequired

• der Komplex ein: hinzufügen require: 'ngModel' zu Ihrer Richtlinie und die entsprechenden Änderungen, um für diese zu arbeiten. Auf diese Weise haben Sie eine bessere Kontrolle und Flexibilität. Was werden Sie zum Beispiel tun, wenn Sie ngModelOptions zu combo hinzufügen möchten? Wenn Sie diese Lösung nicht implementieren, müssen Sie sie manuell hinzufügen.

  Sie können mit dem Lesen beginnen What's the meaning of require: 'ngModel'? - es ist eine tolle Frage/Antwort, die verschiedene Beispiele enthält. Für eine ausführlichere Erklärung, werfen Sie einen Blick auf Using NgModelController with Custom Directives.Als Randnotiz haben sie in Angular 1.5 die Syntax von require verbessert - siehe $onInit and new "require" Object syntax in Angular components.