Question

我正在构建一个角度应用程序，我已经设置了一些表单。我有一些字段需要在提交前填写。因此我添加了“必要的”＃39;在他们身上：

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

但是，当我启动我的应用时，字段会显示为“无效”字样。和班级无效＆＃39;和＆＃39; ng-invalid-required＆＃39;甚至在单击提交按钮之前或在用户在字段中键入任何内容之前。

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

Answer 1

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

您可以尝试的CSS规则：

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

其中基本上说明了字段在页面加载后的某个时刻输入了某些内容并且未被$scope.formName.setPristine(true)重置为原始状态且某些内容尚未输入且它无效然后文本转为{ {1}}。

Angular表单的其他有用类（请参阅input for future reference）

red - 当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。

Answer 2

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

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

Answer 3

由于字段为空，因此无效，因此正确添加了ng-invalid和ng-invalid-required类。

您可以使用课程ng-pristine检查字段是否已被使用过。

Answer 4

尝试在提交表单或字段无效时动态添加类以进行验证。使用表单名称并将“name”属性添加到输入。 Bootstrap示例：

<div class="form-group" ng-class="{'has-error': myForm.$submitted && (myForm.username.$invalid && !myForm.username.$pristine)}">
    <label class="col-sm-2 control-label" for="username">Username*</label>
    <div class="col-sm-10 col-md-9">
        <input ng-model="data.username" id="username" name="username" type="text" class="form-control input-md" required>
    </div>
</div>

同样重要的是，您的表单具有ng-submit =“”属性：

<form name="myForm" ng-submit="checkSubmit()" novalidate>
 <!-- input fields here -->
 ....

  <button type="submit">Submit</button>
</form>

您还可以为表单添加可选的验证功能：

//within your controller (some extras...)

$scope.checkSubmit = function () {

   if ($scope.myForm.$valid) {
        alert('All good...'); //next step!

   }
   else {
        alert('Not all fields valid! Do something...');
    }

 }

现在，当您加载应用时，只有在提交表单或触摸了字段时才会添加“has-error”类。代替：
！myForm.username。$原始

你也可以使用：
myForm.username。$脏

Answer 5

接受的答案是正确的..对于移动设备，你也可以使用它（ng-touching而非ng-dirty）

input.ng-invalid.ng-touched{
  border-bottom: 1px solid #e74c3c !important; 
}

Angular会自动添加＆＃39; ng-invalid＆＃39;上课时需要＆＃39;领域

5 个答案: