为什么在Angular中添加ng-pristine ng-invalid ng-invalid-required类

Question

我正在尝试在Angular中实现表单验证

这里是html

<input type="email" placeholder="Email" ng-model="form.emailId"  name="email" required />

它正在添加课程 ng-pristine ng-invalid ng-invalid-required ng-valid-email

默认显示红色边框。

我不想默认显示红色边框。我想在提交时显示。使用HTML5验证

有什么想法吗？如何解决这个问题

非常感谢

Answer 1

This是一篇有用的文章，介绍了您需要知道的所有内容：具体而言，this section：

包括文章中的一些文字供参考：

  

有时在用户输入时不希望显示错误。当用户在表单中键入时，错误会立即显示。这是因为Angular的数据绑定功能非常出色。由于所有内容都会立即发生变化，因此在讨论表单验证时可能会出现问题。

     

对于您只想在提交表单后显示错误的情况，您可以稍微调整上面的代码。

     

您需要在提交按钮上删除ng-disabled，因为我们希望用户能够提交表单，即使该表单不完全有效。

     

您将在提交表单后添加变量。在您的submitForm（）函数内部，只需添加$ scope.submitted = true;。一旦提交表单，这就将提交的变量存储为true。

     

从ng-class =＆＃34; {＆＃39; has-error＆＃39;}调整错误规则：userForm.name。$ invalid＆amp;＆amp; ！userForm.name。$ pristine}＆＃34;到ng-class =＆＃34; {＆＃39; has-error＆＃39; ：userForm.name。$ invalid＆amp;＆amp; ！userForm.name。$ pristine＆amp;＆amp;已提交}＆＃34;。这可确保仅在提交表单后才会显示错误。您需要调整所有其他ng-class和ng-show以考虑此变量。   现在，如果提交的变量设置为true，表单只显示错误。