AngularJS输入监视$ valid或$ error

Question

I'm trying to $watch the $error or the $valid value of a control. This is the control:

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

business-validation is a custom directive that alters the validity of the control. I've attempted the following approaches (using either $valid or $error ) based on what I've read at AngularJS directive watch validity :

1. This does not work since $valid does not exist on myForm.myInput .

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

2. This does not work since validity.valid apparently cannot be watched.

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

3. This does not work since $scope.myInputMdl is not watched on every change.

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

Can't the validity be watched from a controller?

EDIT

I'm not trying to write or edit business-validation directive. What I'm trying is to $watch $valid or $error from form's controller.

EDIT 2

Controller's code is:

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

Answer 1

I don't see any reason why your first variant shouldn't work.

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 and directive:

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 property value will change when myInput validity changes, and $watch callback will be fired.

See example: http://jsfiddle.net/Lzgts/287/

Answer 2

Try the code below. Working Plunker

HTML

<div ng-controller="ExampleController">
  <form name="userForm" novalidate >
    Name:
    <input type="text" name="userName" ng-model="firstName" required />
  </form>
  <div>{{firstName}}</div>
  <input type = 'button'  value = 'Submit' ng-click ='validateInput()'/>
</div>

JavaScript

 angular.module('getterSetterExample', [])
  .controller('ExampleController', ['$scope', function($scope) {
    $scope.validateInput = function(){
      $scope.$watch($scope.userForm.userName.$valid, function() {
       if($scope.userForm.userName.$valid){
         alert('Value is True');
       }
       else{
         alert('Value is False');
       }
      });

    }

  }]);