[英]Angular 2 retrieve error message from custom validator
我在角度2中编写了一个自定义验证器
function validateSomething(): ValidatorFn {
return (control: Abstractcontrol): { [key: string]: any } => {
return {'validateSomething': 'Validation failed because'};
}
}
非常简单的验证器。 现在在html中,我根据验证器的输出显示一个对话框。 我想要的是能够从验证器显示错误('验证失败,因为')。 我看到的大多数教程在html中使用了hasError('validateSomething')然后硬编码错误,如下所示:
<div class="ui pointing orange basic label" *ngIf="form.controls['workDate'].hasError('validateSomething')">
Here I want to display the message from the validator
</div>
有没有办法可以从验证器获取错误消息?
使用AbstractControl#getError()
:
<div
class="ui pointing orange basic label"
*ngIf="form.getError('validateSomething', 'workDate') as error>
{{ error }}
</div>
我们假设您有自定义验证指令( appValidateSomething ),它执行一些验证逻辑。 '验证'方法如下所示:
validate(c: AbstractControl): { [key: string]: any; } {
const v = c.value;
if (isValid(v)) {
return null;
} else {
// Return error object.
return {
'invalidValue': v
}
};
}
在HTML代码中,您可以编写以下代码:
<input [(ngModel)]="model" type="text" #obj1="ngModel" appValidateSomething/>
<div *ngIf="obj1.errors && (obj1.dirty || obj1.touched)">
<div [hidden]="!obj1.errors.invalidValue">Wrong value.</div>
</div>
重要的是,从验证函数返回的错误对象“一个InvalidValue”错误对象匹配“.errors.invalidValue”。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.