components: mat-error does not display on submit when fields are added in a FormArray
Bug, feature request, or proposal:
The mat-error directive doesn’t display on submit when fields are added in a FormArray. The error is shown when you touch the field. Also when I change the mat-error to a regular div, the div is just being shown.
What is the expected behavior?
Show mat-error on submit when field is untouched.
What is the current behavior?
Does not show mat-error on submit when field is untouched.
What are the steps to reproduce?
Repro: https://angular-material2-issue-ttt1jk.stackblitz.io/
- Add some fields with Angular Validators in a FormArray (this counts for every field, mat-select, matInput, etc.)
I have HTML like this:
- mat-form-field – mat-select – mat-error
Or:
- mat-form-field – input matInput – mat-error
What is the use-case or motivation for changing an existing behavior?
Validation needs to be shown on submit so the user knows the field has errors.
Which versions of Angular, Material, OS, TypeScript, browsers are affected?
- Angular v5.1.0
- Material v5.0.1
- TypeScript v2.4.2
- Every browser
Is there anything else we should know?
About this issue
- Original URL
- State: open
- Created 7 years ago
- Reactions: 11
- Comments: 19 (8 by maintainers)
Same here.
mat-errornot displaying errors unless touchedCreate a method like onChange() or onKeyup()… It depends on the event handler
// Ts file onChange(){ this.form.controls[‘targetField’].markAsTouched(); }
//Html File <input (change)=“onChange()”>
This has worked for me