Angular Mat error未显示自定义验证器的错误，但模板显示错误

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>

---

我正在尝试一个自定义验证器。html表单json管道显示输出，但mat error不显示输出。

由于这是您自己的错误，您无法将其作为控件的属性访问。改为这样做：

<mat-error *ngIf="personalform.hasError('invalidPhoneMatch')">

第二种方法

使验证器成为表单字段控制器的验证器

personalform = this.fb.group({
    phno: ['', [Validators.required, Validators.pattern('\\+{0,1}[0-9]{10,12}')]],
    phonePersonal01: ['', [Validators.required, this.checkContactNumbers, Validators.pattern("\\+{0,1}[0-9]{10,12}")]],
    phonePersonal02: ['', [Validators.required, Validators.pattern("\\+{0,1}[0-9]{10,12}")]],
});

---

如果我是json piping it

{{personalform.hasError（'invalidPhoneMatch'）|json}}

，则值从fals变为true，这很好，但mat错误仍然没有填充。如果我在div标记中写入相同的内容，那么它就工作了。即使我实现了它，直到现在，我的怀疑仍然有效。如果我请求帮助，请不要投反对票。好吧，我的印象是，这与以下事实有关：您从

personalform

中得到一个错误，但您试图在

phonePersonal01

领域内显示它。我的意思是，这个特殊的表单控件知道它本身没有错误，但现在被迫显示一个错误。我认为这是无法预见的。尝试将此验证器正式放入

phonePersonal01

的验证器列表中。这应该可以做到。

<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: ['', [Validators.required, this.checkContactNumbers, Validators.pattern("\\+{0,1}[0-9]{10,12}")]],
    phonePersonal02: ['', [Validators.required, Validators.pattern("\\+{0,1}[0-9]{10,12}")]],
});