Wie greife ich von einer Anweisung auf das untergeordnete ngModel zu?

Question

Wie in this question, möchte ich .error auf einem Formularfeld übergeordnete .control-group hinzufügen, wenn scope.$invalid ist wahr.

Allerdings HardCoding der Formularname wie in ng-class="{ error: formName.fieldModel.$invalid }" bedeutet, dass ich das nicht in verschiedenen Formen wiederverwenden kann, und ich würde diese Deklaration lieber nicht überall wiederholen.

dachte ich, dass eine Richtlinie, die funktionieren könnte etwa wie folgt aussieht:

<div class="control-group" error-on="model1, model2"> 
    <input ng-model="model1"> 
    <input ng-model="model2"> 
</div> 

Also, wenn entweder model1 oder model2 nicht gültig ist, .control-group bekommt .error hinzugefügt.

My attempt here. Kann man aufgrund der Modellnamen von der Direktive auf die Modelle zugreifen?

Wenn es einen besseren Ansatz gibt, würde ich es auch gerne hören.

Answer 1

Ich glaube nicht, dass eine benutzerdefinierte Richtlinie necessery für diesen Anwendungsfall ist das Schreiben als die ng-form directive genau für Situationen wie die erstellt wurde. Aus der Dokumentation der Richtlinie:

Es ist nützlich, zu nisten Formen, zum Beispiel, wenn die Gültigkeit einer Untergruppe der Kontrollen muss bestimmt werden.

Nehmen Sie den Code als Beispiel würde man schreiben:

<div class="control-group" ng-class="{ error: myControlGroup1.$invalid }> 
    <ng-form name="myControlGroup1"> 
    <input ng-model="model1"> 
    <input ng-model="model2"> 
    </ng-form> 
</div> 

Durch die Nutzung dieser Technik, die Sie brauchen, um in ng-Modell nicht Ausdrücke wiederholen verwendet und dieses Fragment innerhalb irgendeiner Form wiederverwenden können.

Answer 2

Innerhalb Ihrer Link-Funktion können Sie auf die formController zugreifen. Es hat alle Steuerelemente. So wird die folgende Ihrer Richtlinie Zugang zu .$valid geben:

el.controller('form')[attrs.errorOn].$valid 

aber ich weiß nicht, wie das für Veränderungen zu beobachten. Ich habe versucht zu sehen attrs.errorOn (dh, beobachten Sie die ng-Modell-Eigenschaft), aber die Uhr wird nicht ausgelöst, es sei denn, ein gültiger Wert eingegeben wird (wegen der Art und Weise, wie eckige Formen funktionieren ... es sei denn, dieser Wert ist gültig, es ist nicht zugewiesen Die von ng-model festgelegte Bereichseigenschaft.)

Fiddle.

Vielleicht kann jemand nehmen diese weiter ...

Answer 3

Sie können auch das Markup in der akzeptierte Antwort ändern, ohne die Verschachtelung zu tun, da ng-form auch eine Richtlinie Klasse:

<div class="control-group ng-form" name="controlGroup11" ng-class="{ error: controlGroup1.$invalid }> 
    <input ng-model="model1"> 
    <input ng-model="model2"> 
</div> 

Final solution Fiddle