Angular Material reactive form: showing different error messages for every validator

Question

I have a reactive form and I want to show different error messages with <mat-error>, but I don't know how. I searched already a bit.

TS:

  selectDataFormGroup: FormGroup = this.formBuilder.group({
    headerCoordinate: ['', [
        Validators.required,
        Validators.pattern(/^.+:.+$/)
      ]
    ],
    contentCoordinate: ['', [
        Validators.required,
        Validators.pattern(/^.+:.+$/)
      ]
    ],
  });

HTML:

<mat-form-field fxFlex>
  <input matInput formControlName="headerCoordinate">
  <mat-error>{{ 'Field is required' | translate }}</mat-error>
</mat-form-field>

I need different error messages for required and pattern. <mat-error> shows up when the form field is not valid in general. How can I achieve this?

Emilien · Accepted Answer · 2020-01-08 16:57:07Z

2

Could you try something like this :

<mat-form-field fxFlex>
  <input matInput formControlName="headerCoordinate">
  <mat-error *ngIf="selectDataFormGroup.get('headerCoordinate').hasError('required')">{{ 'Field is required' | translate }}</mat-error>
  <mat-error *ngIf="selectDataFormGroup.get('headerCoordinate').hasError('pattern')">{{ 'Field do not have the right format' | translate }}</mat-error>
</mat-form-field>

answered Jan 8, 2020 at 16:57

Emilien

2,7534 gold badges17 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular Material reactive form: showing different error messages for every validator

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related