MdInput doesn't set required asterisk when the validator is set in reactive forms

[bboehm86]

Bug, feature request, or proposal:

The placeholder from the MdInput does not show the asterisk (*) when we use Validators.required in the FormControl.

What is the expected behavior?

The asterisk should be shown as it is when setting the requiredattribute.

What are the steps to reproduce?

http://plnkr.co/edit/XqkOmF502Q8RFj8qcUwp?p=preview
or take a look at the input-container-demo

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

To be not dependet on the template to visually indicate that the input is required.

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

all (to my knowlege it never worked)

[fxck]

Likely the same problem as the one that this PR fixes #2565

[bboehm86]

Probably not exactly the same because the control does not have a required state since it is a validator (other than in the disabled case)

[fxck]

Yeah but the underlying problem seems to be the same, only checking the existence of the required input, instead of checking whether required validator exists(which I think will be a little tricky).

[fxck]

@kara

[bboehm86]

While you are at it... the md-select seems to have the same issue (plnkr). Should i open another ticket for that?

[kara]

Currently there isn't a great way to determine if Validators.required has been added to the control because form validators are combined into an aggregate function at setup. I think the correct solution to this might be to add a better way to retrieve individual validators in core @angular/forms.

In the meantime, you'll have to use the required property binding when using md-select or md-input with reactive forms. You'll probably want to use it with the Validators.required to avoid changed after checked errors.

I'll keep this open so we can track, but I think the change will have to be in core first.

[bboehm86]

@kara thanks for the info. I guess we'll have to wait then :-)

..and Kara is right, there seems not to be a great way to get a hold of the Validators.required (or any other validator).. Actually I only found one, but for anyone who rly needs to get a hold of its existance of the required you can do smth like:

myControl = new FormControl('', Validators.required);
validationResult = myControl.validator(new FormControl); // will be {required: true}

[calbot]

Using the required attribute doesn't work well if the input is inside an ngIf I have found. The core forms automatically adds the required validator to the control when the required attribute is used on the input but it doesn't go away once the input is no longer in the dom. Maybe that's a separate issue for the core side not cleaning up when an element is removed from the dom. This leads to a form appearing invalid when it shouldn't be.

[eltonplima]

I'm using this solution:

<input formControlName="name" [required]="formGroup.get('name').errors !== null && formGroup.get('name').errors.required">