angular / angular/components

mat-error does not display on submit when fields are added in a FormArray

Open
#9,007 19 comments 11 reactions 0 assignees View on GitHub
area: material/form-field P3
Dominant language
TypeScript
Stars
25k
Forks
6.8k
Avg merge
1d 8h
Merged PRs (30d)
91

Description

#### 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?

Contributor guide

Open the contributing guide

Research direction

Start with the linked StackBlitz reproduction and compare mat-error behavior for matInput and mat-select controls added to a FormArray. Verify the untouched controls after submit and after being touched. Done means validation errors appear on submit for every invalid field without requiring the field to be touched.

Written by the indexing model from the issue text.

Assessment

Tech stack
angular, typescript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.