javascript - Angular 在 'ng-invalid' 字段上自动添加 'required' 类

Question

我正在构建一个 Angular 应用程序，并为其设置了一些表单。我有一些字段需要在提交前填写。因此我在它们上面添加了“必需”:

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

但是，当我启动我的应用程序时，甚至在提交按钮被点击之前或用户在字段。

我如何确保这两个类不会立即添加，而是在用户提交表单或在相应字段中输入错误后添加？

Answer 1

由于输入为空，因此在实例化时无效，Angular 正确地添加了 ng-invalid类。

您可能会尝试的 CSS 规则:

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

这基本上说明了自页面加载以来该字段何时在某个时间点输入了内容并且未被 $scope.formName.setPristine(true) 重置为原始状态|并且某些内容尚未输入且无效，然后文本变为 red .

Angular 表单的其他有用类(参见 input for future reference)

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>对于所有这些模式和创建的任何自定义模式。