Question

我有以下HTML元素：

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

但是当我输入无效"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

使用此

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

在你的情况下 <input type="text" ng-model="form.artist" ng-class="{'class-name':'form.artist.$invalid}">

Answer 3

是的，你可以用另一种方式使用ng-class属性：

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

Answer 4

您必须将name属性添加到input，然后$invalid标记来自[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>

请参阅this jsfiddle

另见角度the documentation：

类似地，具有ngModel指令的输入控件包含NgModelController的实例。可以使用输入控件上的name属性将此类控件实例发布为表单实例的属性。 name属性指定表单实例上的属性名称。

如果输入无效，如何分配类？

4 个答案: