web-dev-qa-db-de.com

Angular fügt automatisch 'ng-invalid'-Klasse in' erforderliche 'Felder hinzu

Ich baue eine Winkel-App, für die ich einige Formulare eingerichtet habe ..__ Ich habe einige Felder, die vor dem Absenden ausgefüllt werden müssen. Deshalb habe ich sie hinzugefügt:

<input type="text" class="form-control" placeholder="Test" ng-model="data.test" required>

Wenn ich jedoch meine App starte, werden die Felder als 'ungültig' angezeigt und die Klassen 'ng-invalid' und 'ng-invalid-required', sogar bevor der Senden-Button angeklickt wurde oder bevor der Benutzer etwas in die Felder eingegeben hat.

Wie kann ich sicherstellen, dass diese 2 Klassen nicht sofort hinzugefügt werden, sondern entweder, nachdem der Benutzer das Formular gesendet hat oder wenn er etwas falsch in das entsprechende Feld eingegeben hat?

29
Spearfisher

Da die Eingaben leer sind und daher beim Instanziieren ungültig sind, fügt Angular die Klasse ng-invalid korrekt hinzu.

Eine CSS-Regel, die Sie versuchen könnten:

input.ng-dirty.ng-invalid {
  color: red
}

Gibt an, dass seit dem Laden der Seite etwas in das Feld eingegeben wurde und von $scope.formName.setPristine(true) nicht in den ursprünglichen Zustand zurückgesetzt wurde und etwas noch nicht eingegeben wurde und es ist ungültig, dann wird der Text red.

Andere nützliche Klassen für Winkelformen (siehe Eingabe für zukünftige Referenz )

ng-valid-maxlength - wenn ng-maxlength durchläuft
ng-valid-minlength - wenn ng-minlength durchläuft
ng-valid-pattern - wenn ng-pattern durchläuft
ng-dirty - wenn seit dem Laden des Formulars etwas eingegeben wurde
ng-pristine - wenn seit dem Laden der Formulareingabe nichts eingefügt wurde (oder sie wurde über setPristine(true) im Formular zurückgesetzt)
ng-invalid - Wenn eine Überprüfung fehlschlägt (required, minlength, benutzerdefinierte usw.) 

Ebenso gibt es ng-invalid-<name> für alle diese Muster und alle benutzerdefinierten, die erstellt werden.

63
Ryan Q

Dank dieses Beitrags verwende ich diesen Stil, um den roten Rand zu entfernen, der automatisch mit Bootstrap angezeigt wird, wenn ein erforderliches Feld angezeigt wird. Der Benutzer hatte jedoch noch keine Möglichkeit, etwas einzugeben:

input.ng-pristine.ng-invalid {
    -webkit-box-shadow: none;
    -ms-box-shadow: none;
    box-shadow:none;
}
6
user2344489

Da die Felder leer sind, sind sie nicht gültig, sodass die Klassen ng-invalid und ng-invalid-required ordnungsgemäß hinzugefügt werden.

Mit der Klasse ng-pristine können Sie prüfen, ob die Felder bereits verwendet wurden oder nicht.

1
Minko Gechev

Versuchen Sie, die Klasse zur Validierung dynamisch hinzuzufügen, wenn das Formular gesendet wurde oder das Feld ungültig ist. Verwenden Sie den Formularnamen und fügen Sie der Eingabe das Attribut 'name' hinzu. Beispiel mit Bootstrap:

<div class="form-group" ng-class="{'has-error': myForm.$submitted && (myForm.username.$invalid && !myForm.username.$pristine)}">
    <label class="col-sm-2 control-label" for="username">Username*</label>
    <div class="col-sm-10 col-md-9">
        <input ng-model="data.username" id="username" name="username" type="text" class="form-control input-md" required>
    </div>
</div>

Es ist auch wichtig, dass Ihr Formular das Attribut ng-submit = "" hat:

<form name="myForm" ng-submit="checkSubmit()" novalidate>
 <!-- input fields here -->
 ....

  <button type="submit">Submit</button>
</form>

Sie können dem Formular auch eine optionale Funktion zur Validierung hinzufügen:

//within your controller (some extras...)

$scope.checkSubmit = function () {

   if ($scope.myForm.$valid) {
        alert('All good...'); //next step!

   }
   else {
        alert('Not all fields valid! Do something...');
    }

 }

Wenn Sie nun Ihre App laden, wird die Klasse "has-error" nur hinzugefügt, wenn das Formular gesendet wird oder das Feld berührt wurde. Anstatt:
! myForm.username. $ pristine

Sie könnten auch verwenden:
myForm.username. $ dirty

0
grindking