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

Question

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.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
    console.log(c[`value`][`phno`]);
    console.log(c[`value`][`phonePersonal01`]);

    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.

score 2 · Accepted Answer · 2021-05-05T05:58:11.980

2

As this is your own error you cannot access it as a property of the control. Do it this way instead:

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

Second. The way you build your error object is wrong either. You have to have this structure:

return {invalidPhoneMatch: {value: true}};

Second approach

Make the validator a validator of the form field's controller.

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}")]],
});

edited May 05 '21 at 05:58

answered May 04 '21 at 21:24

If I am json piping it `{{personalform.hasError('invalidPhoneMatch')|json}}` , the value is turning from fals to true which is perfectly fine but mat error is still not populating – Kartik Dolas May 05 '21 at 02:36
If the same I write in div tag then it's working. – Kartik Dolas May 05 '21 at 02:37
Even I was achieving it till this point, my doubt is valid. Don't downvote if i am asking for help – Kartik Dolas May 05 '21 at 03:29
Well, I'm of the impression that it has to do with the fact, that you get an error from `personalform` but you try to show it inside the realm of `phonePersonal01`. I mean, this particular form control knows that it has nor errors itself but is now forced to show one. I reckon that this is not foreseen. Try to put this validator officially into the validator list of `phonePersonal01`. this should do it. – May 05 '21 at 05:51

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

1 Answers1