mdInput does not update with form control status when submit

[sashanana]

Bug, feature request, or proposal:

Bug?

What is the expected behavior?

Invalid formControl of formGroup should shown error and update related style when submit.

What is the current behavior?

Invalid formControl of formGroup does not show error and does not update related style when submit.
_form.status is invalid.

What are the steps to reproduce?

https://plnkr.co/edit/rQXSXREDhy9w7oet1ZhB?p=preview

• Leave fields blank and click submit
  Current: Favorite food is highlighted as required, Favorite dessert is seen as untouched
  Expected: Favorite food and Favorite dessert would be highlighted as required

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

formGroup component could group html, css, and validation of related formControl together which could be reuse easily

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

Angular: 4.0.3
Material: 2.0.0-beta.6

Is there anything else we should know?

Thanks

[mmalerba]

This seems like probably incorrect usage of the forms API since even after switching to native inputs I see the following error in the plunker:

Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'true'. Current value: 'false'.

here's a version of the plunker updated to work with latest beta and inputs switched to native inputs: https://plnkr.co/edit/8u5gM3bJOn3EizjyLp0m?p=preview

@kara do you know the correct way to accomplish this?

[sashanana]

Hi Thanks for taking a look of this

The error seems to be related with the way to display the development message, please check the updated plunker

https://plnkr.co/edit/OqrRzPx4uomgVVJVdXfh?p=preview

[tytskyi]

I am not able to run original plunker due to some error in System.js config.
But the second is fixed here: https://plnkr.co/edit/13Tsu5fXBy2aNWxE6Fvt?p=preview
I don't think you supposed to use template-driver validator with reactive-driven control. Validators should be attached explicitly to control instance (see Validators.required)

[mmalerba]

Ok, I switched it back to md-input-containers (https://plnkr.co/edit/rLi6SeY3OxDheTZHLjRW?p=preview) and I see the issue with no errors in the console, will take another look.

[tytskyi]

Working plunker: https://plnkr.co/edit/w3nDfjlVVvHOzxW6d6vO?p=preview
See how i removed any [formGroup] except the root one.
I think each [formGroup] creates new instance where this.submitted property is not synchronised with the value of the top one.

I tried to experiment with leaving [formControl] on either level - it seems like any combination does not work.

Form group is injected via DI here: https://github.com/angular/material2/blob/2.0.0-beta.8/src/lib/input/input-container.ts#L237 (which injects closest FormGroup)
Then this condition does not pass, since form.submitted is false https://github.com/angular/material2/blob/2.0.0-beta.8/src/lib/input/input-container.ts#L268

[sashanana]

Hi tytskyi

Thanks for the update, so the only way is to use [formControl] instead of formControlName. Thank you!
Then I couldn't make md-select to switch to error state when submit, neither with or without component,
is it a misused or is it a different issue?

As for the validator, just follow the recommendation from angular doc.
https://angular.io/guide/form-validation

That does not seems to work on md-select though.

[sashanana]

md-select

https://plnkr.co/edit/Ai37AuxbBI7bUJfHvNxI?p=preview

[mmalerba]

@sashanana md-select error state doesn't take submitted state into account (which is a bug) filed #5826 to track that.

For this issue @tytskyi is correct, seems to be an issue with how forms API was being used, his example shows the correct way.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}