Angular会在"必填"字段上自动添加"ng-invalid"类

Question

我正在构建一个角度应用程序,我已经设置了一些表单.我有一些字段需要在提交前填写.因此我在其上添加了'required':

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

但是,当我启动我的应用程序时,即使在单击提交按钮之前或在用户在字段中键入任何内容之前,字段仍显示为"无效"且类别为"ng-invalid"和"ng-invalid-required".

我怎样才能确保不会立即添加2个类,但是一旦用户提交了表单或者他在相应的字段中输入了错误？

Answer 1

由于输入为空,因此在实例化时无效,因此Angular会正确添加ng-invalid类.

您可能尝试的CSS规则:

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

这基本上说明当字段已经在某个时刻输入了某些内容,因为页面已加载并且未被重置为原始状态$scope.formName.setPristine(true)且某些内容尚未输入,并且它无效然后文本转动red.

Angular表单的其他有用类(请参阅输入以供将来参考)

ng-valid-maxlength-当ng-maxlength通行证
ng-valid-minlength-当ng-minlength通行证
ng-valid-pattern-当ng-pattern通行证
ng-dirty-当表单已自装的形式进入的东西
ng-pristine-当表单输入无关,因为加载插入了(或者它是通过重置setPristine(true)表单上)
ng-invalid-当任何验证失败(required,minlength,定制的等等)

同样地,也ng-invalid-<name>存在所有这些模式以及创建的任何自定义模式.

Answer 2

感谢这篇文章,我使用这种风格删除了在显示必填字段时自动显示的红色边框,但是用户没有机会输入任何内容:

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