javascript - 加载后立即使表单无效

Question

我有一个用 AngularJS 编写的简单表单。我想在加载后立即使表单无效。不幸的是 $scope.myForm.$valid = false; 不需要工作。你还有其他技术可以做到吗？这对我来说很重要，因为我想让用户仅在他/她至少选择复选框时单击按钮。现在，您始终可以在加载表单后提交表单。

<form name="myForm" ng-submit="myForm.$valid">

    <input type="checkbox" ng-model="obj.first" ng-change="onChange()" /> First <br />
    <input type="checkbox" ng-model="obj.second" ng-change="onChange()"/>Second <br />
    <input type="checkbox" ng-model="obj.third" ng-change="onChange()"/> Third <br>

    <button type="submit" ng-disabled="!myForm.$valid" ng-click="click()">test</button> <br>
</form>



$scope.myForm = {};
        $scope.myForm.$valid = false;
        $scope.click=function () {
            console.log('-------------2', $scope.myForm);
        };

        $scope.onChange=function () {
            console.log('before:', $scope.myForm);
            var isValid = false;
            angular.forEach($scope.obj, function(value, key) {
                if(value == true){
                    isValid=true;
                }
                console.log(key + ': ' + value);
            });

            if(!isValid){
                $scope.myForm.$valid = false;
                $scope.myForm.$error.checkBoxes = {
                    isChecked: false
                };
            }

            console.log('after:', $scope.myForm);

        }

Answer 1

所以这是我的最终解决方案，范围中的表单有一个名为 $setValidity() 的函数，我们可以在其中更改有效性状态，并通知表单。请参阅here ，所以我检查是否有任何复选框具有 true 值，然后我将一个复选框的值单独设置为 true，如果不是，则将名称为 one 的复选框之一设置为 $ valid = false，这样整个表单就会失效，请通过我的代码来实现解决方案!

JSFiddle Demo

JS:

var app = angular.module('myApp', []);

app.controller('MyController', function MyController($scope) {
  $scope.onChange = function() {
    if ($scope.obj) {
      if ($scope.obj.first || $scope.obj.second || $scope.obj.third) {
        $scope.myForm.one.$setValidity("Atleast one checkbox needs to be selected", true);
      } else {
        $scope.myForm.one.$setValidity("Atleast one checkbox needs to be selected", false);
      }
    } else {
      $scope.myForm.one.$setValidity("Atleast one checkbox needs to be selected", false);
    }
  }
});