AngularJS - 使用 $valid 进行动态验证答案

【问题标题】：AngularJS - dynamic validation using $validAngularJS - 使用 $valid 进行动态验证
【发布时间】：2017-09-01 20:02:43
【问题描述】：

我正在使用 AngularJS 来验证表单，并且我有这个按钮可以提交。

<button type="submit" ng-disabled="btn" ng-click="submit(settings.$valid)"
        class="btn btn-primary">
  Submit
</button>

只要表单无效，该按钮就会被禁用，但一旦有效，该按钮就会被启用。

这是我的代码

$http.get("http://localhost:5000/settings").then(function(response){
    $scope.numberOfRows = response.data.numberOfRows
    console.log($scope.numberOfRows)
    if($scope.numberOfRows==0 && $scope.settings.$valid == false ){
        $scope.btn=true
    }else if($scope.numberOfRows==0 && $scope.settings.$valid == true){
        $scope.btn=false
    }

    if($scope.numberOfRows==1){
        $scope.btn=true
    }

})

我的问题是当 numberOfRows = 0 且表单invalid 时，我无法提交我想要的表单。

但是，当我填写我的表格并且它变为有效时，什么都没有发生。

你能帮帮我吗？

【问题讨论】：

什么都没发生是什么意思？能详细解释一下吗？
我的意思是，每当我正确填写表格时，按钮仍然禁用，我无法提交表格
你可以调试这个，只需在html中做{{btn}}，在你给的函数里做console.log($scope.numberOfRows, $scope.settings.$valid)！
我试过 {{btn}} 但总是正确的，对于 console.log()，除非你刷新页面，否则它无法显示另一个结果，这意味着你将始终从同一点
你需要做的，是给按钮ng-disabled="validate()"，并在验证函数中移动if语句，这将连续计算，我认为你的函数只检查一次条件。

标签： javascript angularjs forms validation

【解决方案1】：

$http.get("http://localhost:5000/settings").then(function(response){
    $scope.hasRow= response.data.numberOfRows>0;
    $scope.settings.$valid=$scope.hasRow;
})

并将此代码添加到您的 html 中

 <button type="submit" ng-disabled="!settings.$valid" ng-click="submit()"
        class="btn btn-primary">
  Submit
</button>

【讨论】：