Angular fügt automatisch die Klasse 'ng-invalid' in die Felder 'required' ein
Baue ich eine eckige app, für die ich einige Formulare eingerichtet.
Ich habe einige Felder, die erforderlich sind, um sein Feld vor submition. Daher habe ich 'erforderlich' auf Sie:
<input type="text" class="form-control" placeholder="Test" ng-model="data.test" required>
Jedoch wenn ich starte meine app, die Felder angezeigt, die als 'ungültig' und die Klasse 'ng-invalid' und 'ng-invalid-erforderlich', noch bevor der submit-button wurde, klicken Sie auf oder bevor der Benutzer eingegeben hat, etwas in die Felder.
Wie kann ich sicherstellen, dass thoses 2-Klassen werden nicht Hinzugefügt, aber sofort, sobald der Benutzer den Antrag eingereicht hat oder wenn er etwas Falsches eingegeben in das entsprechende Feld?
InformationsquelleAutor der Frage Spearfisher | 2014-03-16
Du musst angemeldet sein, um einen Kommentar abzugeben.
Da die Eingänge sind leer und daher ungültig, wenn instanziiert, Gewinkelt, korrekt fügt die
ng-invalid
Klasse.Einer CSS-Regel, die Sie könnten versuchen:
Welche im wesentlichen besagt, wenn das Feld hatte sich etwas in Sie eingegeben irgendwann seit Sie die Seite geladen war und nicht zurückgesetzt in die unberührte, von
$scope.formName.setPristine(true)
und etwas war noch nicht eingetragen und es ist ungültig, dann wird der text drehtred
.Andere nützliche Klassen für die Kantigen Formen (siehe input für zukünftige Referenz )
ng-valid-maxlength
- wennng-maxlength
übergibtng-valid-minlength
- wennng-minlength
übergibtng-valid-pattern
- wennng-pattern
übergibtng-dirty
- wenn die form hat etwas eingetragen, da die form geladenng-pristine
- wenn die Eingabe in ein Formular hat nichts eingefügt da geladen (oder es war reset übersetPristine(true)
auf dem Formular)ng-invalid
- bei jeder Validierung fehlschlägt (required
minlength
benutzerdefinierte diejenigen, usw)Ebenso gibt es auch
ng-invalid-<name>
für alle diese Muster und sämtliche custom ones erstellt.InformationsquelleAutor der Antwort Ryan Q
Dank diesem Beitrag habe ich diesen Stil benutzen, entfernen Sie den roten Rahmen, der erscheint, automatisch mit bootstrap, wenn ein required-Feld wird angezeigt, aber der Benutzer hat nicht die chance haben, Eingang alles schon:
InformationsquelleAutor der Antwort user2344489
Da die Felder leer sind, sind Sie nicht gültig, so die
ng-invalid
undng-invalid-required
Klassen korrekt Hinzugefügt werden.Können Sie die Klasse
ng-pristine
heraus zu überprüfen, ob die Felder bereits benutzt oder nicht.InformationsquelleAutor der Antwort Minko Gechev
Versuchen, fügen Sie die Klasse für die Validierung dynamisch, wenn das Formular abgesendet wurde oder das Feld ist ungültig. Verwenden Sie den Namen des Formulars und fügen Sie die 'name' - Attribut zum input. Beispiel mit Bootstrap:
Ist es auch wichtig, dass Ihre form hat die ng-submit="" Attribut:
Können Sie auch hinzufügen, eine optionale Funktion für die Validierung der form:
Nun, wenn Sie laden Sie Ihre app die Klasse "has-error' wird nur dann Hinzugefügt werden, wenn das Formular abgeschickt wird oder das Feld berührt hat.
Statt:
!myForm.username.$unberührte
Könnte man auch verwenden:
myForm.username.$dirty
InformationsquelleAutor der Antwort grindking
die akzeptierte Antwort ist richtig.. für mobile können Sie auch diese (ng-berührt und nicht ng-dirty)
InformationsquelleAutor der Antwort shakirthow