Wie in diese Frage , möchte ich .error für das übergeordnete Element .control-group eines Formularfelds hinzufügen, wenn scope.$invalid wahr ist.
Wenn Sie jedoch den Formularnamen wie in ng-class="{ error: formName.fieldModel.$invalid }" fest codieren, bedeutet dies, dass ich das nicht in verschiedenen Formularen wiederverwenden kann. Außerdem würde ich diese Deklaration lieber nicht überall wiederholen.
Ich dachte mir, dass eine Direktive, die ungefähr so aussieht, funktionieren könnte:
%Vor% Wenn also model1 oder model2 nicht gültig ist, wird .control-group .error hinzugefügt.
Mein Versuch hier . 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.
Ich denke nicht, dass das Schreiben einer benutzerdefinierten Anweisung für diesen Anwendungsfall wie die ng-form -Direktive erforderlich ist wurde genau für Situationen wie diese erstellt. Aus der Dokumentation der Richtlinie:
Es ist nützlich, Formulare zu verschachteln, zum Beispiel wenn die Gültigkeit einer Untergruppe gilt von Kontrollen muss bestimmt werden.
Wenn Sie Ihren Code als Beispiel nehmen, würde man schreiben:
%Vor%Mit dieser Technik müssen Sie die in ng-model verwendeten Ausdrücke nicht wiederholen und können dieses Fragment in jeder Form wiederverwenden.
Sie können auch das Markup in der akzeptierten Antwort ändern, um auf die Verschachtelung zu verzichten, da ng-form ebenfalls eine Klassendefinition ist:
Innerhalb Ihrer Link-Funktion können Sie auf den formController zugreifen. Es hat alle Steuerelemente. Im Folgenden erhalten Sie daher Zugriff auf .$valid :
Allerdings weiß ich nicht, wie ich das für Änderungen beobachten soll. Ich habe versucht, attrs.errorOn zu beobachten (dh die Eigenschaft ng-model zu beobachten), aber die Uhr wird nur ausgelöst, wenn ein gültiger Wert eingegeben wird (wegen der Art und Weise, wie eckige Formulare funktionieren ... es sei denn, dieser Wert ist gültig) der von ng-model festgelegten Bereichseigenschaft zugewiesen.)
Geige .
Vielleicht kann jemand das weiter machen ...
Tags und Links angularjs angularjs-directive