Angular Material - Anwendung Fehlerklasse verzögert wird, wenn manuell eingestellt Fehler bei der Eingabe

Question

Ich habe einen Eingang Benutzername und ich habe eine benutzerdefinierte Fehlermeldung „Benutzername bereits vergeben“ über ng-Meldungen. Es ist mir gelungen, die Fehlermeldung manuell hinzuzufügen und anzuzeigen, aber das Problem ist die "Fehlerklasse" (oder etwas, das die Winkelmaterialeingabe bei Fehler in Farbe Rot umwandelt) ist eine Art von "verzögert". Ich setze den Fehler, dann zeigt die Fehlermeldung, aber es gibt keine Fehlerklasse angewendet. Ich habe den Benutzernamen-Wert geändert (dadurch wird der Fehler basierend auf meiner benutzerdefinierten Funktion auf "false" gesetzt), dann verschwindet die Fehlermeldung, aber die Fehlerklasse wird gerade angewendet.

Ihnen zu zeigen, was mein Problem ist, heres ein plunkr

--EDIT--

Jemand gab mir und Idee, und ich habe nur manuell die Fehlerklasse eingestellt auf Eingabe, aber in der eigenen Art und Weise. Einfach md-is-Fehler auf md-Input-Container und auch manuell einstellen Eingabe der Gültigkeit in der Steuerung

<md-input-container md-is-error="sampleForm.userName.$invalid"> 

Heres eine aktualisierte plunkr

Answer 1

Seine Arbeits finden Sie in der Plunker Plunker

Verwenden ng-Klasse hinzuzufügen dynamisch 'Errorclass' das Eingabefeld

ng-class="{'errorClass': sampleForm.userName.$error.alreadyTaken}"

Ich habe .errorClass hinzugefügt, wenn der $ Fehler wahr wird.

write ‚alexpogi‘ in Feld Benutzername, die den Inhalt rot