模糊上的Angular2 - FormControl验证
模糊上的Angular2 - FormControl验证
提问于 2015-11-23 16:49:15
我正在考虑添加一些基本的电子邮件验证，以检查用户是否输入了正确的电子邮件地址。目前使用下面的方法，验证随着用户输入而更新，当输入一个字符后出现错误时，这看起来很奇怪。
validEmail(c: Control){
if(!c.value.match('[a-z0-9!#$%&\'*+/=?^_`{|}~-]+(?:\\.[a-z0-9!#$%&\'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?')){
return {
validEmail: true
};
}
return null;
}
ctrlEmailAddress: Control = new Control('', Validators.compose([
Validators.required, this.validEmail]));我想知道是否有可能触发字段模糊的验证，就像在angularJS中那样：
ng-model-options="{ updateOn: 'blur' }"我知道html中输入字段上的blur选项，但这不会使我的控件出错，除非有办法将控件置于错误状态。
有人能帮我指出正确的方向吗？
谢谢。
编辑:我正在寻找一个angular2解决方案，而不是一个angularJS解决方案。
回答 3
Stack Overflow用户
发布于 2016-09-13 10:51:50
在rc6中找到了一种方法。
1-创建指令: validate-onblur.directive.ts
@Directive({
selector: '[validate-onblur]',
host: {
'(focus)': 'onFocus($event)',
'(blur)': 'onBlur($event)'
}
})
export class ValidateOnBlurDirective {
constructor(public formControl: NgControl) {
}
onFocus($event) {
this.formControl.control.markAsUntouched(false);
}
onBlur($event) {
this.formControl.control.markAsTouched(true);
}
}然后在html模板中，只需将指令添加到表单中，我的示例使用ReactiveFormsModule模型。
然后将以下内容添加到错误消息中：
<input type="text" formControlName="full_name" validate-onblur />
<span *ngIf="formAccountDetails.controls.full_name.touched && !formAccountDetails.controls.full_name.valid && !formAccountDetails.controls.full_name.pristine" class="errors">
...
</span>Stack Overflow用户
发布于 2017-02-10 09:44:24
我对Alex Shestakov的解决方案做了一点改进，顺便说一句，这个方案已经起作用了，为了避免在保持焦点不变的情况下将控件状态设置为有效。
@Directive({
selector: '[validate-onblur]',
host: {
'(focus)': 'onFocus($event)',
'(blur)' : 'onBlur($event)'
}
})
export class ValidateOnBlurDirective {
private validators: any;
private asyncValidators: any;
private hasFocus = false;
constructor(public formControl: NgControl) {
}
onFocus($event) {
this.hasFocus = true;
this.validators = this.formControl.control.validator;
this.asyncValidators = this.formControl.control.asyncValidator;
this.formControl.control.clearAsyncValidators();
this.formControl.control.clearValidators();
this.formControl.control.valueChanges
.filter(() => this.hasFocus)
.subscribe(() => this.formControl.control.markAsPending());
}
onBlur($event) {
this.hasFocus = false;
this.formControl.control.setAsyncValidators(this.asyncValidators);
this.formControl.control.setValidators(this.validators);
this.formControl.control.updateValueAndValidity();
}
}这样，只要控件保持焦点，它就会保持挂起状态。这将有助于避免当控件在获得焦点之前是无效的，然后一旦用户开始在它上键入，它就被标记为有效的情况，在模糊事件发生之前，当再次设置验证器时，应该确定控件的实际有效性。
Stack Overflow用户
发布于 2015-11-25 23:49:35
你可以
[class.has-error]="!form.controls['ctrlEmailAddress'].valid"这将在您更改模型时立即添加has-error类。所以基本上你不需要模糊来进行验证检查。
这解决了angular 2.0.0测试版的问题;)
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/33866824
复制相关文章
相似问题