AngularJS輸入手錶$有效或$錯誤

Question

我試圖$watch$error或$valid控件的值。這是控制：

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

business-validation是改變控制的有效性自定義指令。我已經嘗試以下方法（使用$valid或$error）基於什麼我在AngularJS directive watch validity閱讀：

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); 
   

無法在有效期從控制器觀看？

編輯

我並不想編寫或編輯business-validation指令。我想要的是從窗體的控制器到$watch$valid或$error。

EDIT 2

控制器的代碼是：

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> 

控制器和指令：當myInput有效性的變化，$watch回調將被解僱

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屬性值會發生變化。

參見例如：http://jsfiddle.net/Lzgts/287/

Answer 2

嘗試下面的代碼。 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'); 
     } 
     }); 

    } 

    }]);