[英]AngularJS input watch $valid or $error
我试图$watch
$error
或控件的$valid
值。 这是控件:
<form id="myForm" name="myForm">
<input name="myInput" ng-model="myInputMdl" business-validation/>
</form>
business-validation
是一个自定义指令,可更改控件的有效性。 我已经根据在AngularJS指令监视有效性上阅读的内容尝试了以下方法(使用$valid
或$error
):
这不起作用,因为$valid
在myForm.myInput
上不存在。
$scope.$watch('myForm.myInput.$valid', function (isValid) { $scope.usefulVariable = step3.CreditCardNumber.$valid; },true);
这不起作用,因为validity.valid
显然无法监视。
$scope.$watch('myForm.myInput.validity.valid', function (isValid) { $scope.usefulVariable = step3.CreditCardNumber.$valid; },true);
这不会起作用,因为不会在每次更改时都监视$scope.myInputMdl
。
$scope.$watch('$scope.myInputMdl', function (isValid) { $scope.usefulVariable = step3.CreditCardNumber.$valid; },true);
无法从控制器监视有效性吗?
编辑
我不是要编写或编辑business-validation
指令。 我正在尝试的是从表单的控制器中$watch
$valid
或$error
。
编辑2
控制器的代码为:
app.controller('WizardBusinessActionCtrl',
function ($scope, $http, $parse, $filter, wizardBusinessActionService, $timeout) {
//controller code
}
);
我看不出您的第一个变体不起作用的任何原因。
HTML:
<div ng-app="myApp">
<div data-ng-controller="MainController">
<form name="myForm">
<input name="myInput" ng-model="myInputMdl" business-validation />
</form>
</div>
</div>
控制器和指令:
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;
});
}
};
});
当myInput
有效性更改时, $valid
属性值将更改,并且将触发$watch
回调。
参见示例: http : //jsfiddle.net/Lzgts/287/
试试下面的代码。 工作柱塞
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');
}
});
}
}]);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.