指令不要求输入变化 [英] Directive not called on input change
问题描述
我面对我似乎无法来解决的问题。
我有几个输入,每一个指令,验证输入值,如:
I'm facing an issue which I can't seem to solve. I have several inputs with each a directive to validate the input value, like this:
<div class="row form-group">
<div class="col-sm-6">last name</div>
<div class="col-sm-6">
<div class="input-group" ng-class="{'has-error': form.lastname.$invalid && (form.lastname.$touched || form.$submitted)}">
<input type="text" name="lastname" class="form-control"
model-blur
validator-lastname
ng-trim="true"
ng-model="fields.lastname.value"
ng-maxlength="fields.lastname.validation.maxLength">
<input-group-addon class="input-group-addon"
iga-char=""
iga-form="form"
iga-field="form.lastname"
iga-if-touched="true">
</input-group-addon>
</div>
<form-message-list fml-form="form"
fml-field="form.lastname"
fml-label="Last name"
fml-fieldData="fields.lastname">
</form-message-list>
</div>
</div>
本场需要以下模式: / ^ [\\'A-ZA-Z _] +([\\'A-ZA-Z _] +)* $ /
我的问题是这样的:
当我添加了一个无效的价值我的投入,这样的:/,我无效的消息仍然和NG-无效的图案仍然是我的领域
在我这个模式添加到我的领域是这样的: NG-模式=/ ^ [\\'A-ZA-Z _] +([\\'A-ZA-Z _] +)* $ /
我没有任何问题。但是,当我试着通过指令来验证的验证-姓只检查一次。当我填写输入一个无效的值,然后将其更改为空的,这是允许的,在NG-无效图案的错误依然存在。
When I add this pattern to my field like this: ng-pattern="/^[\'a-zA-Z_]+( [\'a-zA-Z_]+)*$/"
I don't have any issues. But when I try to validate via my directive validator-lastname it only checks one time. When I fill the input with an invalid value and then change it to empty, which is allowed, the ng-invalid-pattern error remains.
这是我的指令:
angular.module('app')
.directive('validatorLastname', validatorLastname);
/* @ngInject */
function validatorLastname() {
var directive = {
require: 'ngModel',
link: link
};
return directive;
function link(scope, element, attrs, modelCtrl) {
var valid = false;
var formatter = function (inputValue) {
if (inputValue) {
var res = inputValue.match(/^[\'a-zA-Z_]+( [\'a-zA-Z_]+)*$/);
if (res && res.length > 0) {
valid = true;
}
modelCtrl.$setValidity('pattern', valid);
valid = false;
}
return inputValue;
};
modelCtrl.$parsers.push(formatter);
if (scope[attrs.ngModel] && scope[attrs.ngModel] !== '') {
formatter(scope[attrs.ngModel]);
}
}
}
我做了一个的jsfiddle重现该问题: http://jsfiddle.net/sZZEt/537/一>
我希望有人能指出我在正确的方向。
先谢谢了。
I hope someone can point me in the right direction. Thanks in advance.
推荐答案
您应该更新您的指令code,使一切工作正常。
You should update your directive code to make everything work fine.
angular.module('app')
.directive('validatorLastname', validatorLastname);
/* @ngInject */
function validatorLastname() {
var directive = {
require: 'ngModel',
link: link
};
return directive;
function link(scope, element, attrs, modelCtrl) {
var valid = false;
var formatter = function (inputValue) {
if (inputValue) {
var res = inputValue.match(/^[\'a-zA-Z_]+( [\'a-zA-Z_]+)*$/);
if (res && res.length > 0) {
valid = true;
}
modelCtrl.$setValidity('pattern', valid);
valid = false;
}else{
modelCtrl.$setValidity('pattern', true);
}
return inputValue;
};
modelCtrl.$parsers.push(formatter);
if (scope[attrs.ngModel] && scope[attrs.ngModel] !== '') {
formatter(scope[attrs.ngModel]);
}
}
}
我创建了一个普拉克
您的问题...
这是因为如果inputValue将是null,则你的$ setValidity方法将不会调用,无法再次进行验证。你应该格局有效期设置为true else部分内。如果你想现场有效期为无输入。
现在,您可以参考更新普拉克 https://plnkr.co/edit/N3DrsB?p = preVIEW
这篇关于指令不要求输入变化的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!