multiple mat-error for formArray unable to figureout

Question

I want to have multiple error messages and unable to figure out how to do so..? Here I need to validate each step separately so that's why I am using this stepper

<form [formGroup]="formGroup" method="POST" #f="ngForm">
    <mat-vertical-stepper #linearVerticalStepper="matVerticalStepper" formArrayName="formArray" [linear]="true">
        <mat-step formGroupName="0" [stepControl]="formArray?.get([0])">
            <mat-form-field>
               <mat-label>Email</mat-label>
               <input matInput formControlName="emailCtrl" required>
               <mat-error>This field is required</mat-error>
               <mat-error>Invalid Email</mat-error>
            </mat-form-field>
        </mat-step>
   </mat-vertical-stepper>
</form>

and form builder is:-

ngOnInit() {
    this.formGroup = this._formBuilder.group({
      formArray: this._formBuilder.array([
        this._formBuilder.group({
          emailCtrl: [
            "",[
            Validators.required,

//This field is required

            Validators.pattern(
              "^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)+$"

// Invalid Email Provided

            )]
          ],
        }),
      ])
    });
  }

I want show two different messages for two different types of cases i.e, `
First Name is required

First Name should be in between 2-30 char
` — Mubeen, Nov 07 '18 at 05:51
i think you want to show mat error even if the form field is not touched or value changed. is it? as @trichetriche said you there will be no error in *Validators.pattern*, *Validators.email* or *Validators.maxLength* when there is no value in input — Akhi Akl, Nov 07 '18 at 09:56

score 1 · Accepted Answer · answered Nov 06 '18 at 08:16

1

The reason you can't have both validation message showing is because of the source code itself.

If you open the source code on their official repository, on the right line, you will see that the email validator doesn't pop an error for empty values.

If you wish to display both errors, you will have to overwrite the validator yourself and provide it to your own form control.

If you don't know how to do it, you have the documentation about custom validators to help you.

answered Nov 06 '18 at 08:16

I want show two different messages for two different types of cases i.e, `
First Name is required

First Name should be in between 2-30 char
` – Mubeen Nov 07 '18 at 05:48
I explained to you that it doesn't work like that, and I explained to you how to make it work like that. Did you at least read my answer ? – Nov 07 '18 at 07:54

score 1 · Answer 2 · answered Apr 19 '20 at 14:30

I knwo it's too late. But i think it will be helpful for future refrences. It's in their official example .If you take a close look on their email validation error message it will be like this.

 <mat-error *ngIf="email.invalid">{{getErrorMessage()}}</mat-error

and in in ts file you have to define the messages which you want to show accroding to the error

getErrorMessage() {
if (this.email.hasError('required')) {
  return 'You must enter a value';
}

return this.email.hasError('email') ? 'Not a valid email' : '';
  }

multiple mat-error for formArray unable to figureout

2 Answers2