AngularJS 输入观察 $valid 或 $error [英] AngularJS input watch $valid or $error

问题描述

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

<input name="myInput" ng-model="myInputMdl" business-validation/></表单>

business-validation 是一个自定义指令，用于更改控件的有效性.根据我在 AngularJS 指令观察有效性:

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

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

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

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

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

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

不能从控制器查看有效性吗?

编辑

我不是要编写或编辑 business-validation 指令.我正在尝试的是从表单的控制器中 $watch $valid 或 $error .

编辑 2

控制器的代码是:

app.controller('WizardBusinessActionCtrl',函数($scope，$http，$parse，$filter，wizardBusinessActionService，$timeout){//控制器代码});

解决方案

我看不出有任何理由说明您的第一个变体不起作用.

HTML:

<div data-ng-controller="MainController"><表单名称="myForm"><input name="myInput" ng-model="myInputMdl" 业务验证/></表单>

控制器和指令:

var myApp = angular.module('myApp', []);myApp.controller('MainController', function ($scope) {$scope.$watch('myForm.myInput.$valid', function (validity) {console.log('valid', 有效性);});});myApp.directive('businessValidation', function () {返回 {限制:'A'，要求:'ngModel'，链接:函数(范围，元素，属性，ctrl){功能验证(输入){返回输入 === '你好';}ctrl.$parsers.unshift(function (value) {var 有效 = 验证(值)；ctrl.$setValidity('businessValidation', valid);返回有效吗?值:未定义；});ctrl.$formatters.unshift(function (value) {ctrl.$setValidity('businessValidation', validate(value));返回值；});}};});

$valid 属性值会随着 myInput 有效性变化而变化，并且会触发 $watch 回调.

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

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

解决方案

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/

这篇关于AngularJS 输入观察 $valid 或 $error的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！