指令未调用输入更改 [英] Directive not called on input change
问题描述
我遇到了一个我似乎无法解决的问题.我有几个输入，每个输入一个指令来验证输入值，如下所示:
<div class="col-sm-6">姓</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"模型模糊验证者姓氏吴修剪=真"ng-model="fields.lastname.value"ng-maxlength="fields.lastname.validation.maxLength"><input-group-addon class="input-group-addon"iga-char=""iga-form="形式"iga-field="form.lastname"iga-if-touched="true"></input-group-addon><form-message-list fml-form="form"fml-field="form.lastname"fml-label="姓氏"fml-fieldData="fields.lastname"></form-message-list>
此字段需要以下格式:/^[\'a-zA-Z_]+( [\'a-zA-Z_]+)*$/
我的问题是:当我向我的输入添加一个无效值时，像这样:/，我的无效消息仍然存在并且 ng-invalid-pattern 仍然在我的字段中.
当我像这样将这个模式添加到我的字段中时:ng-pattern="/^[\'a-zA-Z_]+( [\'a-zA-Z_]+)*$/" 我没有任何问题.但是当我尝试通过我的指令 validator-lastname 进行验证时，它只检查一次.当我用无效值填充输入然后将其更改为空(这是允许的)时，ng-invalid-pattern 错误仍然存在.
这是我的指令:
angular.module('app').directive('validatorLastname', validatorLastname);/* @ngInject */函数验证器姓氏(){var 指令 = {要求:'ngModel'，链接:链接};返回指令；功能链接(范围，元素，属性，模型Ctrl){var 有效 = 假；var 格式化程序 = 函数(输入值){如果(输入值){var res = inputValue.match(/^[\'a-zA-Z_]+( [\'a-zA-Z_]+)*$/);如果(res&& res.length> 0){有效 = 真；}modelCtrl.$setValidity('pattern', valid);有效 = 假；}返回输入值；};modelCtrl.$parsers.push(formatter);if (scope[attrs.ngModel] && scope[attrs.ngModel] !== '') {格式化程序(范围[attrs.ngModel])；}}}我做了一个 JSFiddle 来重现这个问题:http://jsfiddle.net/sZZEt/537/
我希望有人能指出我正确的方向.提前致谢.
您应该更新指令代码以使一切正常.
angular.module('app').directive('validatorLastname', validatorLastname);/* @ngInject */函数验证器姓氏(){var 指令 = {要求:'ngModel'，链接:链接};返回指令；功能链接(范围，元素，属性，模型Ctrl){var 有效 = 假；var 格式化程序 = 函数(输入值){如果(输入值){var res = inputValue.match(/^[\'a-zA-Z_]+( [\'a-zA-Z_]+)*$/);如果(res&& res.length> 0){有效 = 真；}modelCtrl.$setValidity('pattern', valid);有效 = 假；}别的{modelCtrl.$setValidity('pattern', true);}返回输入值；};modelCtrl.$parsers.push(formatter);if (scope[attrs.ngModel] && scope[attrs.ngModel] !== '') {格式化程序(范围[attrs.ngModel])；}}}我为您的问题创建了一个 plunk...这是因为如果 inputValue 为 null 那么您的 $setValidity 方法将不会调用并且无法再次执行验证.您应该在 else 部分将模式有效性设置为 true .如果您想让字段对无输入有效.您现在可以参考更新的 plunk https://plnkr.co/edit/N3DrsB?p=preview
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>
This field required the following pattern: /^[\'a-zA-Z_]+( [\'a-zA-Z_]+)*$/
My issue is this: When I add an invalid value to my input, like this: / , my invalid message remains and ng-invalid-pattern remains on my field.
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.
This is my directive:
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]);
}
}
}
I made a JSFiddle to reproduce the problem: http://jsfiddle.net/sZZEt/537/
I hope someone can point me in the right direction. Thanks in advance.
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]);
}
}
}
I have created a plunk for your problem...
It is because if inputValue is null then your $setValidity method will not invoke and could not perform validation again. You should set pattern validity to true inside else part. if you want to make field valid for no-input.
You can now refer to updated plunk https://plnkr.co/edit/N3DrsB?p=preview
这篇关于指令未调用输入更改的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
