如何设置 Angular 验证以处理模糊和表单提交？答案

【问题标题】：How to setup Angular validation to work on blur and form submit?如何设置 Angular 验证以处理模糊和表单提交？
【发布时间】：2015-07-18 12:12:22
【问题描述】：

Angular 验证目前通过更新模型更改来工作。虽然在键入时显示这些验证错误对 UI 不太友好。

理想的解决方案是在提交表单时同时显示错误消息。一旦第一次输入模糊并显示错误消息，则需要在 keyup/model 更改时更新输入。

我看到以下允许模型在模糊时更新，但这不是一个理想的解决方案，因为模型只在每种情况下更新模糊。

<input type="text" name="user" ng-model="user" ng-model-options="{ updateOn: 'blur' }" required>

我还遇到了以下解决方案，该解决方案在模糊上效果很好，然后在出现错误后更改为 keyup。虽然验证不适用于表单提交。

http://plnkr.co/edit/VSPOYO16ozq2bKaLl3n9?p=preview

【问题讨论】：

那是一个旧的演示......验证在 1.3 中经历了重大升级。然后还介绍了ng-messages

标签： javascript angularjs forms validation

【解决方案1】：

为此，您可以有一个角度范围变量来维护表单提交的状态，默认情况下该变量为 false。

$scope.submitted = false;

还有一个作用域函数，用于验证表单提交上的字段。请记住，表单元素的地名属性在功能上必须是相同的。函数方法是使其通用。您也可以通过访问该输入元素的$dirty 和$error 变量来直接写入html模板。

$scope.validateInput = function (name, type) {
  var input = $scope.demoform[name];
          return (input.$dirty || $scope.submitted) && input.$error[type];
};

这是在表单提交时调用的函数。

$scope.submitForm = function () {
            $scope.submitted = true;
            if ($scope.demoform.$valid) {
                console.log('Submitted!!');
            } else {
                console.log('Not valid!!');
                return false;
            }
        };

现在在 html 模板上你可以这样写。

<form name="demoform" ng-submit="submitForm()" novalidate="">
    <input type="text" name="name" required="" ng-model="name"/>
    <span ng-show="validateInput('name', 'required')" class="text-danger">Name is required</span>
    <button type="submit" class="btn btn-info" >Save</button>
</form>

现在在提交表单时，如果字段无效，您可以看到验证消息。

Demo Plunkr of form validation on form submit in angular

【讨论】：

验证对象中已经有一个$submitted 属性...无需创建自己的
这似乎都是在控制器内部处理的？我不应该在指令中处理这个，以便它可以应用于我页面上的任何表单和输入吗？
@charlietfl 感谢您指点我。下次我会照顾的。是的，我知道表格中有一个属性。在这里我忘了使用它。我会记住更好的代码练习。
@SatyamKoyani 不用担心..我曾经做过同样的事情...但是在 1.3 中进行了很多升级
@Fizzix 您可以将指令作为可重用组件。

【解决方案2】：

创建一个绑定到 blur 事件的指令，您似乎找到了一个可以工作但我无法在手机上读取 Plunkr 的指令，并使用它来设置有效性。

现在在控制器的提交函数中，您需要检查表单是否有错误。

if (Object.keys($scope.formName.$error).length > 0) { 
    return false;
}

是一种简单的方法，并且仍将表单设置为 $submitted。

【讨论】：