Eckig automatisch hinzufügen 'ng-invalid' - Klasse auf 'erforderlich' Felder

Baue ich eine eckige app, für die ich einige Formulare eingerichtet.
Ich habe einige Felder, müssen ausgefüllt werden, bevor die Einreichung. 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 Spearfisher | 2014-03-16
  1. 67

    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:

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

    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 dreht red.

    Andere nützliche Klassen für die Kantigen Formen (siehe input für zukünftige Referenz )

    ng-valid-maxlength - wenn ng-maxlength übergibt

    ng-valid-minlength - wenn ng-minlength übergibt

    ng-valid-pattern - wenn ng-pattern übergibt

    ng-dirty - wenn die form hat etwas eingetragen, da die form geladen

    ng-pristine - wenn die Eingabe in ein Formular hat nichts eingefügt da geladen (oder es war reset über setPristine(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.

    • Q - Aber dies führt zu problem während der Verwendung von Screenreader (NVDA-Screenreader in meinem Fall) - Es ruft 'Ungültiger Eintrag' sobald das Feld fokussiert ist.
    • Das ist interessant Kumar für screen-Reader. Ich bin neugierig, ist dies, weil der Winkel der controller die Validierung setter oder durch die einfache rote Farbe, die auf den Eingang?
    • Hallo Ihr fix ist schlecht, da Benutzer nicht von der CSS vorlegen oder nicht vorlegen, die form, also mit diesem Entwickler müssen überprüfen Sie vor dem senden das Ergebnis, um überall, oder setup eine boolean auf jeden Eingang (modelchange)
    InformationsquelleAutor Ryan Q
  2. 7

    Dank für diesen post, ich verwenden Sie diesen Stil zu löschen, der rote Rahmen, der erscheint, automatisch mit bootstrap, wenn ein required-Feld wird angezeigt, aber der Benutzer hat nicht die chance haben, Eingang alles schon:

    input.ng-pristine.ng-invalid {
    -webkit-box-shadow: none;
    -ms-box-shadow: none;
    box-shadow:none;
}
    • Perfekt. Danke. Ich ging mit Eingang.ng-unberührt.ng-invalid...
    • Es nicht funktioniert.
    InformationsquelleAutor user2344489
  3. 2

    Da die Felder leer sind, sind Sie nicht gültig, so die ng-invalid und ng-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 Minko Gechev
  4. 0

    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:

    <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>

    Ist es auch wichtig, dass Ihre form hat die ng-submit="" Attribut:

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

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

    Können Sie auch hinzufügen, eine optionale Funktion für die Validierung der form:

    //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...');
    }

 }

    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 grindking
  5. -1

    die akzeptierte Antwort ist richtig.. für mobile können Sie auch diese (ng-berührt und nicht ng-dirty)

    input.ng-invalid.ng-touched{
  border-bottom: 1px solid #e74c3c !important; 
}
    • Die ng-touched Klasse bedeutet, der Bereich ist unscharf, es hat nichts mit Mobilfunk zu tun.
    InformationsquelleAutor shakirthow
Schreibe einen Kommentar