javascript - 以编程方式将所有表单字段设置为 ng-touched 表单提交

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">

当用户点击提交时，我试图让我的“有错误”类针对无效字段启动。

我想你可以这样做:

$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.");
}

笨蛋: http://plnkr.co/edit/XmvoTkIQ0yvFukrVSz11