获取表单角度的字段

Posted 2023-03-06

【中文标题】获取表单角度的字段

【英文标题】：Getting the field of form angular

【发布时间】：2018-01-24 05:08:41

【问题描述】：

我有一个包含一些字段的表单。 我正在使用 css 类验证字段：（如果该字段无效并且用户触摸了它，则输入的边框颜色 = 红色。）

select.ng-invalid.ng-touched,
input.ng-invalid.ng-touched,textarea.ng-invalid.ng-touched 
    border-color: red;

如果用户提交表单时未填写一个或多个字段，则会出现危险警报。

HTML：

  <div ng-show="formInvalid>
       error!
  </div>

JS：

 if ($scope.pniyaForm.$valid) 
    $scope.formInvalid = false;
      .....
  else 
    $scope.formInvalid = true;
 

但是，如果用户提交表单并且没有触摸任何字段，css 类不会影响。（因为用户没有触摸......） 我想在代码中添加类。 有没有人想出一种优雅的方法来做到这一点，而无需分别在每个字段上编写它？

【参考方案1】：

在 angularjs 中使用 ng-class 验证

<div class="form-group">
    <label>Name</label>
    <input type="text" required ng-model="name" name="name" ng-class="'has-error': myForm.name.$invalid" />
</div>

<div class="form-group">
    <label>Age</label>
    <input type="text" required ng-model="age" name="age" ng-class="'has-error': myForm.age.$invalid" />
</div>

【讨论】：

这对我不起作用，我需要添加其他内容/注意一些重要的细节吗？

【参考方案2】：

一种可能的解决方案：

当您执行表单功能时，将以下行添加到其中。

$scope.$apply(function () );

此行将导致 ng $scope.$watch() 运行并应用更改（如果存在）。 可能有效，也可能无效，请阅读以下链接以更深入地了解该问题。

http://jimhoskins.com/2012/12/17/angularjs-and-apply.html

【参考方案3】：

如果用户提交表单并且没有触及任何字段，css 类不会影响

您需要为 ngModel 提供初始定义的值，并至少为输入提供 required 属性。

使用 ngClass 有条件地应用 css 类，以防某些表单部分无效

<form name="myform">
    <div class="form-group" ng-class="'has-error': myform.myinput.$invalid">
        <input name="myinput" ng-model="myName" class="...." required> 
    </div>
....
</form>

....
// in controller
$scope.myName = "cats"; // form is valid
$scope.myName = "";     // form is invalid, and the css class 'has-error' will be applied 

然后在提交按钮中使用 ngDisables 以防止表单无效时提交

<button type="submit" ng-disabled="myform.$invalid">submit</button>