A required mat-input field does not show error when the parent form is submitted.

[svadali16]

Bug, feature request, or proposal:

For the purpose of code re-use and to maintain consistent functionality across my web app, I created an input component in my app whose role is to embed a mat-input in a parent form.

When the mat-input is a required field, the component displays it correctly in the parent form and an error is displayed when a user interacts with the field but does not enter anything. However, no error is displayed when the parent form is submitted without any user interaction with the embedded field.

Am I missing something? Is there a workaround?

What is the expected behavior?

An error should be displayed when the parent form is submitted.

What is the current behavior?

An error is not displayed when the parent form is submitted.

What are the steps to reproduce?

See: https://stackblitz.com/edit/angular-material2-issue-jph57r

What is the use-case or motivation for changing an existing behavior?

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

I am using Chrome. Output of ng --version is given below:

Angular CLI: 1.6.0
Node: 8.9.3
OS: win32 x64
Angular: 5.1.0
... animations, common, compiler, compiler-cli, core, forms
... http, platform-browser, platform-browser-dynamic
... platform-server, router

@angular/cdk: 5.0.0
@angular/cli: 1.6.0
@angular/language-service: 4.4.6
@angular/material: 5.0.0
@angular-devkit/build-optimizer: 0.0.38
@angular-devkit/core: 0.0.25
@angular-devkit/schematics: 0.0.48
@ngtools/json-schema: 1.1.0
@ngtools/webpack: 1.9.0
@schematics/angular: 0.1.13
@schematics/schematics: 0.0.13
typescript: 2.4.2
webpack: 3.10.0

Is there anything else we should know?

[Jefiozie]

I have seen a issue about this somewhere but don't remember where and what the original problem was. I fixed it by manual setting the fields as touched. See the code below.

workaround for me:

private setFormGroupTouched(formGroup: FormGroup) {
    Object.keys(this.formGroup.controls).forEach(field => {
      const control = this.formGroup.get(field);
      control.markAsTouched({ onlySelf: true });
    });
  }

[svadali16]

Good workaround. Thanks!

[quietHeliumRadiation]

Can't you simply use [disabled]="nameOfForm.invalid" in your submit button?

Example for your stackblitz, include [disabled]="dummyForm.invalid" to your parent component's submit button. This way the user can't submit if there's no interaction or if there's an error.

[maxisam]

@Ldhatter Because it is not a good UX.

@Jefiozie 's workaround does work. Anyone wonders why there is no markAsAllTouched checkout this thread angular/angular#11774

[eprevot]

Does someone know what is the original problem ? I can use the workaround but I'd like to know why the mat-error doesn't show on parent form submission, like it's supposed to according to the documentation

[cluzier]

I have seen a issue about this somewhere but don't remember where and what the original problem was. I fixed it by manual setting the fields as touched. See the code below.

workaround for me:

private setFormGroupTouched(formGroup: FormGroup) {
    Object.keys(this.formGroup.controls).forEach(field => {
      const control = this.formGroup.get(field);
      control.markAsTouched({ onlySelf: true });
    });
  }

so will this set only the missing form fields to touched after hitting submit?

[cluzier]

Does someone know what is the original problem ? I can use the workaround but I'd like to know why the mat-error doesn't show on parent form submission, like it's supposed to according to the documentation

Original Problem:
An error is not displayed when the parent form is submitted.

[slarrieu]

Any updates?

[mmalerba]

Here's an updated version of the stackblitz, still appears to be an issue: https://stackblitz.com/edit/angular-material2-issue-a3ftax?file=app/app.module.ts