Question

HTML：

<div class="form-group" 
     ng-class="{ 'has-error' : form.firstName.$invalid && form.firstName.$touched }">
  <label for="firstName" 
         class="control-label">
         First Name
  </label>
  <input type="text" 
         name="firstName" 
         id="firstName" 
         ng-model="editableUser.firstName" 
         class="form-control" 
         required>
  <span class="help-block" 
        ng-show="form.firstName.$error.required && form.firstName.$touched">
        First Name is required
  </span>
</div>

<input type="submit" 
       ng-click="submit()" 
       value="Submit" 
       class="btn btn-default">

我试图弄清楚我的错误＆＃39;当用户单击提交时，用于启动无效字段的类。

我认为你可以这样做：

$scope.submit = function () {
  if ($scope.form.$invalid) {
    angular.forEach($scope.form.$invalid, function(field) {
      field.$setTouched();
    });
    alert("Form is invalid.");
  }
};

但https://docs.angularjs.org/api/ng/type/form.FormController

中没有$setTouched方法

编辑：实现$setTouched确实存在，它位于https://docs.angularjs.org/api/ng/type/ngModel.NgModelController

Answer 1

if ($scope.form.$invalid) {
    angular.forEach($scope.form.$error, function (field) {
        angular.forEach(field, function(errorField){
            errorField.$setTouched();
        })
    });
    alert("Form is invalid.");
}

plunker： http://plnkr.co/edit/XmvoTkIQ0yvFukrVSz11

Answer 2

尝试最近添加的$ submitted

<input type="text" 
     name="firstName" 
     id="firstName" 
     ng-model="editableUser.firstName" 
     class="form-control" 
     required>
   <span class="help-block" 
    ng-show="form.firstName.$error.required && (form.firstName.$touched || form.$submitted">
    First Name is required

Answer 3

扩展Alexey的答案，您可以向FormController添加新方法，这样做也是如此，因此无需将代码从一个提交功能复制到另一个提交功能：

// config.js
export default function config($provide) {
    $provide.decorator('formDirective', $delegate => {
        const fn = $delegate[0].controller.prototype
        if (!('$setTouched' in fn)) fn.$setTouched = function() {
            if (this.$invalid) {
                Object.values(this.$error).forEach(controls => {
                    controls.forEach(control => control.$setTouched())
                })
            }
        }
        return $delegate
    })
}

// controller.js
$scope.submit = function () {
    if ($scope.form.$invalid) {
        $scope.form.$setTouched();
        alert("Form is invalid.");
    }
};

如果有人想知道为什么有人想要进行这种验证：缺少iOS约束验证，那么即使在无效表单上也会调用ng-submit。

Answer 4

上述答案对我不起作用。以编程方式将Touched设置为true。

示例，即使执行了此$scope.frmUser["U_Name"].$setTouched(); $scope.frmUser["U_Name"].$invalid始终保持真实。

只有$scope.frmUser.$invalid为假时，提交按钮才启用

取而代之的是，从javascript中以编程方式设置每个字段的范围变量，然后将其设置为true / false很好。

Answer 5

如果您喜欢使用ES6 + lodash fp

import forEach from 'lodash/fp/forEach'

    validate()
    {
        forEach(forEach(field => field.$setTouched()))(this.form.$error)
    }

<form name="$ctrl.form">...</form>

Answer 6

我不确定您为什么认为必须“触摸”字段，只需使用常规表单验证;您只需将字段包装在实际的表单元素中，然后让angular为您进行验证。 Here is a working example.

你真的不需要检查$ touch，甚至设置它（除非有特殊原因你需要这样做？） - 如果它们是必填字段，只需在输入字段上使用required属性：

<input name="namefield" "text" ng-model="user.firstName" required/>

以编程方式将所有表单字段设置为表单提交上的ng-touch

6 个答案: