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

Question

我正在构建一个角度应用程序，为此我设置了一些表格。我有一些必填字段，然后才能提交。因此，我在其上添加了“必需”：

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

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

如何确保不会立即添加那两个类，而是一旦用户提交了表单或当他在相应的字段中键入了错误的内容时立即添加？

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>，所有这些模式和创建的任何自定义模式也都存在。