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

Question

Angular 验证目前通过更新模型更改来工作。尽管在 keyup 时显示这些验证错误对于 UI 来说不是很友好。

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

我已经看到以下允许在模糊时更新模型的内容，但这不是理想的解决方案，因为模型仅在每种情况下都在模糊时更新。

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

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

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

Answer 1

为此，您可以使用一个 Angular 范围变量来维护表单提交的状态，默认情况下该变量为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