未对输入更改调用指令
Directive not called on input change
我面临一个似乎无法解决的问题。我有几个输入,每个输入都有一个指令来验证输入值,如下所示:
<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-pattern="/^[''a-zA-Z_]+( [''a-zA-Z_]+)*$/"
一样,我没有任何问题。但是,当我尝试通过我的指令validator lastname进行验证时,它只检查一次。当我用无效值填充输入,然后将其更改为空(这是允许的)时,ng无效模式错误仍然存在。
这是我的指示:
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/
我希望有人能给我指明正确的方向。提前谢谢。
您应该更新指令代码以使一切正常工作。
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]);
}
}
}
我为您的问题创建了一个plunk
。。。这是因为如果inputValue为null,那么您的$setValidity方法将不会调用,也无法再次执行验证。您应该在else部分内部将模式有效性设置为true。如果您想使字段对无输入有效。您现在可以参考更新的plunkhttps://plnkr.co/edit/N3DrsB?p=preview
相关文章:
- 显示指令时调用指令方法
- AngularJS:如何调用指令中定义的函数'控制器的作用域
- 如何在ngRepeat中调用指令
- 未对输入更改调用指令
- 从子指令调用指令函数不起作用
- 从 AngularJS 中的父控制器调用指令的方法
- 从服务 AngularJS + TypeScript 调用指令
- 如何从 Angular 上的控制器调用指令的函数
- 如何从 JavaScript 调用指令函数
- Angular JS 如何从指令模板内容事件调用指令范围函数
- 从控制器调用指令中函数的最佳方法是什么
- 从传入的内容调用指令方法
- Angularjs-在ng-init函数完成后调用指令
- 从另一个指令调用指令
- 从父指令角度调用指令函数
- 如何从控制器调用指令作用域上的函数
- 有棱角的从html调用指令中的函数
- 动态元素未在AngularJS上调用指令方法
- 是'不良做法'用于Angular控制器调用指令上的函数
- AngularJS:从具有隔离作用域的控制器中调用指令中的函数