javascript - AngularJS 输入监视 $valid 或 $error

Question

我正在尝试$watch控件的$error或$valid值。这是控件:

<form id="myForm" name="myForm"> 
  <input name="myInput" ng-model="myInputMdl" business-validation/>
</form>

business-validation 是一个自定义指令，用于更改控件的有效性。根据我在 AngularJS directive watch validity 上读到的内容，我尝试了以下方法(使用 $valid 或 $error) :

1. 这不起作用，因为 $valid 在 myForm.myInput 上不存在。

   $scope.$watch('myForm.myInput.$valid', function (isValid) {
     $scope.usefulVariable = step3.CreditCardNumber.$valid;
   },true);
   

2. 这不起作用，因为 validity.valid 显然无法观看。

   $scope.$watch('myForm.myInput.validity.valid', function (isValid) {
     $scope.usefulVariable = step3.CreditCardNumber.$valid;
   },true);
   

3. 这不起作用，因为每次更改时都不会监视 $scope.myInputMdl。

   $scope.$watch('$scope.myInputMdl', function (isValid) {
     $scope.usefulVariable = step3.CreditCardNumber.$valid;
   },true);
   

不能从 Controller 上查看有效性吗？

编辑

我不是在尝试编写或编辑 business-validation 指令。我正在尝试的是从表单的 Controller $watch $valid 或 $error 。

编辑2

Controller 的代码是:

app.controller('WizardBusinessActionCtrl',
   function ($scope, $http, $parse, $filter, wizardBusinessActionService, $timeout) {
     //controller code
   }
);

Answer 1

我不明白为什么你的第一个变体不起作用。

HTML:

<div ng-app="myApp">
    <div data-ng-controller="MainController">
        <form name="myForm"> 
            <input name="myInput" ng-model="myInputMdl" business-validation />
        </form>
    </div>
</div>

Controller 和指令:

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

myApp.controller('MainController', function ($scope) {
    $scope.$watch('myForm.myInput.$valid', function (validity) {
        console.log('valid', validity);
    });
});

myApp.directive('businessValidation', function () {
    return {
        restrict: 'A',
        require: 'ngModel',
        link: function (scope, elem, attr, ctrl) {
            function validate (input) {
                return input === 'hello';
            }

            ctrl.$parsers.unshift(function (value) {
                var valid = validate(value);
                ctrl.$setValidity('businessValidation', valid);
                return valid ? value : undefined;
            });

            ctrl.$formatters.unshift(function (value) {
                ctrl.$setValidity('businessValidation', validate(value));
                return value;
            });
        }
    };
});

$valid 属性值将在 myInput 有效性更改时更改，并且将触发 $watch 回调。

参见示例:http://jsfiddle.net/Lzgts/287/