在“必要”领域角度自动添加'NG-无效“级 [英] Angular automatically add 'ng-invalid' class on 'required' fields

问题描述

我建立一个应用程序的角度对我有某种形式成立。
我有所需submition前在现场的一些领域。因此，我增加了必要对他们的：

I am building an angular app for which I have some forms set up. I have some fields that are required to be field before submition. Therefore I have added 'required' on them:

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

然而，当我启动我的应用程序，该字段显示为无效和阶级NG-无效和NG-要求无效，提交按钮已经甚至在点击或用户之前已经输入任何东西字段。

However when I launch my app, the fields are displayed as 'invalid' and the classes 'ng-invalid' and 'ng-invalid-required' even before the submit button has been click or before the user has typed anything in the fields.

我怎样才能确保放入系统2类不会立即添加但无论哪种一旦用户提交表单，或者当他输入错误的东西在相应的领域？

How can I make sure that thoses 2 classes are not added immediately but either once the user has submitted the form or when he has typed something wrong in the corresponding field?

推荐答案

由于确实是无效的，首先，棱角分明的逻辑是把无效的班，开始正确的。

Since the are indeed invalid to begin with, angular's logic is correct in putting the invalid classes to start.

正如你可以尝试把一个CSS规则的例子：

As a css rule example you might try putting:

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

这基本上指出，当该领域已在某些时候进入它的东西，因为在页面加载（并没有恢复到可以通过$ scope.formName.setPristine（真）原始）和进入的东西，它是无效的，那么文字变为红色。

Which basically states when the field has had something entered into it at some point since the page loaded (and wasn't reset to be pristine via $scope.formName.setPristine(true) ) and something entered and it's invalid then the text turns red.

其他有用的班角表格（见备查 输入）

Other useful classes for Angular forms (see input for future reference )

ng-valid-maxlength - Put when ng-maxlength passes
ng-valid-minlength - Put when ng-minlength passes
ng-valid-pattern - Put when ng-pattern passes
ng-dirty - Put when the form has had something entered since the form loaded
ng-pristine - Put when the form input has had nothing inserted since loaded (or it was reset via setPristine(true) on the form)
ng-invalid - Put when any validation fails (required, minlength, custom ones, etc)

像明智里面还有NG-invalid-所有这些模式和创建的任何自定义的。

Like wise there is also ng-invalid- for all these patterns and any custom ones created.

这篇关于在“必要”领域角度自动添加'NG-无效“级的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！