Question

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

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

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

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

感谢。

Answer 1

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

单击该按钮时，将检查字段并通过ng-show显示错误消息。在控制器中，检查表单中的属性。$ 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
    } 
};

Answer 2

我认为需要在这里添加更多示例代码，因为我相信你想要做的是直接使用角度。在上面的snippit中，您实际上是否将表单命名为“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")
  }
});

以下是指向相应plunker的链接这是您要找的内容吗？

或者，您是否遇到了从远程调用加载的数据的问题？在解析承诺时，按钮未启用？请澄清这不是您要找的。

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

2 个答案: