2

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

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

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

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

谢谢。

4

2 回答 2

1

我想出了这个问题的答案。我最终重写了表单以检查按钮单击的验证（而不是使用 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
    } 
};
于 2015-03-31T21:17:45.867 回答
0

我认为这里需要添加更多示例代码，因为我相信您想要做的是直接使用 angular。在上面的代码段中，您实际上是否将您的表单命名为“表单”，例如...？您需要为表单命名以使其可引用。此外，如果您正在检查整个表单的有效性，假设您命名了表单，我认为以下应该有效：

<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的链接 这是您要找的吗？

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

于 2015-03-27T23:50:30.593 回答