md-input-container invalid state

[mbeckenbach]

Bug, feature request, or proposal:

question, bug, or feature request. not sure

What is the expected behavior?

When a user enters text into a required input field and removes the text, there should be an immediate warning as the form control is now touched.

What is the current behavior?

The invalid color and md-error text are only updated after blur.

What are the steps to reproduce?

<md-input-container>
      <input mdInput formControlName="answer" [required]="true">
     <md-error *ngIf="answerControl.errors?.required">Dies ist ein Pflichtfeld.</md-error>
</md-input-container>

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

better user experience

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

ng4.1.x, md beta 5

Is there anything else we should know?

[willshowell]

Error state is calculated as

isInvalid && (isTouched || isSubmitted)

and touched is true when the control has been focused and then blurred.

There's an open issue at #4232 that could be of interest.

[mbeckenbach]

ok, but where does isSubmitted come from? My control does not change to submitted when i submit the form

[willshowell]

See the source here

[mbeckenbach]

@willshowell yes, but there is no submitted property on my form, also in my usecase i cannot use a submit button to submit my form.

[willshowell]

Hmm I see. I think for your original question, your best bet is to push the team on #4232 since that would allow you to configure how the errors are shown.

As a workaround for now, you could bind to the focus event and use myFormControl.markAsTouched(). I think that would get the error to show up immediately.

[mbeckenbach]

ok found a workarround. I created a hidden submit button and an event listener for my custom form submitted event:

´´´
formSubmittedSubscription = this.surveyService.formSubmittedChange.subscribe(value => {
this.formSubmitted = value;
this.submitBtn.nativeElement.click();
});

@ViewChild('submitBtn') submitBtn: ElementRef;
´´´

[jelbourn]

Tracked via #4232

[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.}