如何在 AngularJS 类中添加 $watch 以进行表单验证

Question

我尝试添加一个 $watch 来检查表单是否有效。

// testCtrl.html

 ....
             <div class="row" ng-form="testCtrl.testForm">
                            ...
                      <div class="form-group">
                        <label>NAME</label>
                        <input
                            class="form-control"
                            id="name"
                            type="text"
                            ng-model="testCtrl.testEdit.displayName"
                            autofocus
                            required />
                      </div>
    ...

// testCtrl.js

 ...
    class TestController {
        constructor($scope,
                    ...
                    ) {
    ...
        }
    ...
    
    canSaveTest() {
        return this.testForm.$valid;
    }

...

我想这样添加一个观察者：

$scope.$watch('testForm.$invalid', function(isInvalid)          {
        $scope.disableNextBtn = isInvalid;
});

但我不确定我需要在代码的哪一部分添加这个观察者。

Answer 1

我刚刚为 ng-change 添加了 validateData：

// testCtrl.html ...

                   <input
                        class="form-control"
                        id="name"
                        type="text"
                        ng-model="testtCtrl.testEdit.displayName"
                        ng-change="testCtrl.validateData()"
                        autofocus
                        required
                    />

// testCtrl.js

validateData() {
            this.disableNextBtn = !this.testForm.$valid;
    }