如何解决Mat 错误不显示自定义验证器的错误,但模板显示错误
app.component.html
<div class="col-sm-3">
<mat-form-field class="col-sm-3" appearance="outline"
class="example-full-width input-small-size d-block">
<mat-label>Personal Phone 1
</mat-label>
<input matInput formControlName="phonePersonal01" type="number">
<mat-error *ngIf="personalform.errors?.invalidPhoneMatch">
Enter different numbers.
</mat-error>
<!-- This error is not displaying -->
</mat-form-field>{{personalform.errors|json}}
<!-- Output is : { "invalidPhoneMatch": true }-->
</div>
app.component.ts
personalform = this.fb.group({
phno: ['',[Validators.required,Validators.pattern('\\+{0,1}[0-9]{10,12}')]],phonePersonal01: ['',Validators.pattern("\\+{0,12}")]],phonePersonal02: ['',},{ validator: this.checkContactNumbers }
);
...
checkContactNumbers(c: FormBuilder) {
//safety check
console.log(c[`value`][`phno`]);
console.log(c[`value`][`phonePersonal01`]);
if (c[`value`][`phno`] == c[`value`][`phonePersonal01`])
{
console.log('this ran');
return { invalidPhoneMatch: true }
}
}
我正在尝试自定义验证器。 html 表单 json 管道显示输出,但 mat 错误未显示输出。
解决方法
由于这是您自己的错误,因此您无法将其作为控件的属性进行访问。改为这样做:
<mat-error *ngIf="personalform.hasError('invalidPhoneMatch')">
第二。您构建错误对象的方式也是错误的。你必须有这样的结构:
return {invalidPhoneMatch: {value: true}};
第二种方法
使验证器成为表单域控制器的验证器。
personalform = this.fb.group({
phno: ['',[Validators.required,Validators.pattern('\\+{0,1}[0-9]{10,12}')]],phonePersonal01: ['',this.checkContactNumbers,Validators.pattern("\\+{0,12}")]],phonePersonal02: ['',});
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。