Wie wird eine Klasse zugewiesen, wenn die Eingabe ungültig ist?

Question

ich die folgende HTML-Element haben:

<input type="text" ng-model="form.artist" ng-class="form.artist.$invalid ? 'error' : ''" required ng-minlength="4"> 

Aber es funktioniert nicht, wenn ich eine ungültige Eingabe "form.artist"

Answer 1

<form name="demoForm"> 

<input type="text" name="demoForm.artist" ng-model="form.artist" ng-class="{'yourclassname': demoForm.artist.$invalid && demoForm.artist.$dirty}"> 

</form> 

Answer 2

verwenden

<div ng-class="{'class-name': 'condition'(boolean)}" </div>

In Ihrem Fall <input type="text" ng-model="form.artist" ng-class="{'class-name':'form.artist.$invalid}">

Answer 3

haben

Ja, Sie ca n ng-class verwenden eine andere Art und Weise Attribut:

<input type="text" ng-model="form.artist" ng-class="{'error': form.artist.$invalid}"> 

Answer 4

Sie haben ein name Attribut auf Ihre input setzen, dann $invalid Flagge kommt von [formName].[inputName].$invalid:

<form name="myForm"> 
    <input type="text" name="artist" required 
      ng-minlength="4" 
      ng-model="form.artist" 
      ng-class="myForm.artist.$invalid ? 'error' : ''" /> 
    <!-- or ng-class="{error:myForm.artist.$invalid}" --> 
</form> 

Siehe this jsfiddle

Siehe auch the documentation von eckig:

In ähnlicher Weise enthält ein Eingabesteuerelement mit der ngModel-Direktive eine Instanz von NgModelController. Eine solche Kontrollinstanz kann als Eigenschaft der Formularinstanz mit dem Attribut name des Eingabesteuerelements veröffentlicht werden. Das Attribut name gibt den Namen der Eigenschaft in der Formularinstanz an.