Mat error is not displaying error for custom validators but template is displaying error


    <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
                                <input matInput formControlName="phonePersonal01" type="number">
                                <mat-error *ngIf="personalform.errors?.invalidPhoneMatch">
                                    Enter different numbers.
<!-- This error is not displaying -->
    <!-- Output is : { "invalidPhoneMatch": true }-->


personalform ={

        phno: ['', [Validators.required, Validators.pattern('+{0,1}[0-9]{10,12}')]],
        phonePersonal01: ['', [Validators.required, Validators.pattern("+{0,1}[0-9]{10,12}")]],
        phonePersonal02: ['', [Validators.required, Validators.pattern("+{0,1}[0-9]{10,12}")]],
      }, { validator: this.checkContactNumbers }

checkContactNumbers(c: FormBuilder) {
    //safety check

    if (c[`value`][`phno`] == c[`value`][`phonePersonal01`])
      console.log('this ran');
      return { invalidPhoneMatch: true }

I am trying a custom validator. the html form json pipe is showing the output but mat error is not displaying output.

Source: Angular Material Quesions

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.