如何使用 Angular 中通过 ng-model 预填充的字段执行表单验证

Question

假设我有一个包含必填字段的表单。我通过 ng-model 使用来自我的控制器的数据预填充这些字段。在此表单的提交按钮上，有一个 ng-disabled 属性检查 $invalid，如下所示：

<button ng-click="next()" ng-disabled="form.is.$invalid">Next</button>

我运行遇到的问题是，当页面最初加载时，按钮被禁用并且不会检查字段的有效性，除非我返回并手动删除每个字段并重新键入他们的价值观。

我想知道如何在页面加载时检查此有效性，以便如果我通过 ng-model 将一些数据加载到字段中，它仍会将必填字段识别为有效。

谢谢。

Answer 1

我认为需要在此处添加更多示例代码，因为我相信您想要做的是直接使用 angular。在上面的代码片段中，您是否真的将表单命名为 "form"，例如……？您需要为表格命名，以便它可以被引用。此外，如果您正在检查整个表单的有效性，假设您为表单命名，我认为以下应该有效：

<form name="userForm" novalidate ng-controller="userController">
  <input name="firstname" ng-model="user.firstname" required/>
  <input name="lastname" ng-model="user.lastname" required/>
  <button ng-click="next()" ng-disabled="userForm.$invalid">Next</button>
</form>

而javascript代码是这样的：

var app = angular.module("userApp", [])

.controller("userController", function($scope) {
  var user = {
    firstname: "Willy",
    lastname: "Nilly"
  }
  $scope.user = user;

  $scope.next = function() {
    console.log("next")
  }
});

这里有一个link对应的plunker是你要找的吗？

或者，您是否遇到了从远程调用加载数据的问题，并且在解决 promise 时按钮未启用？如果这不是您要查找的内容，请说明。

Answer 2

我找到了这个问题的答案。我最终重写了表单以检查按钮单击时的验证（而不是使用 ng-disabled。）

单击按钮时，将检查字段并通过 ng-show 显示错误消息。在控制器中，检查 form.$error 中的属性。如果向此对象添加了错误，则存在错误。逻辑如下所示：

$scope.buttonClick = function () {
    var obj = $scope.form.$error, hasErrors = false, key;

    for (key in obj) {
        if (obj.hasOwnProperty(key)) {
            hasErrors = true;
        }
    }

    if (!hasErrors) {
        // proceed
    } 
};

如何使用 Angular 中通过 ng-model 预填充的字段执行表单验证

How to perform form validation with fields that are pre-populated via ng-model in Angular

angularjs

angularjs-scope

angularjs-ng-model