Description
Bug:
I have created a nested form with custom validator in Angular 4 and it works OK without material (see the plunker below). But the validation of whole form is incorrect when I use the following material pattern:
<md-input-container
<input mdInput>
</md-input-container>
What is the expected behavior?
The form should validate properly (like in the plunker below).
What is the current behavior?
The child FormBuilder group is valid (and whole form should be valid), but it seems like the whole form just ignores child FormBuilder group and becomes invalid (only when I use Angular Material's inputs)
What are the steps to reproduce?
Sorry, I have tried to create two plunkers (one with material, and another one without), but I could create only without material, here it is: https://plnkr.co/edit/MpldbfHmavkqWxgiaSql?p=preview
It validates properly while the HTML of input.component is the following:
<div class="form-group">
<div fxFlex class="transition-fast input auth-input-container"
[ngClass]="{'padding-top-large': focused || inputValue !== '', 'padding-top-small': !focused,
'green-border': focused, 'accent-border': !focused}">
<input placeholder="{{placeholder}}" type="{{type}}" class="form-control" required
(focus)="focused = true" (blur)="focused = false" [(ngModel)]="inputValue (keyup)="setNewValue()">
</div>
</div>
But it's broken when I change it to this:
<div class="form-group">
<md-input-container fxFlex class="transition-fast input auth-input-container"
[ngClass]="{'padding-top-large': focused || inputValue !== '', 'padding-top-small': !focused,
'green-border': focused, 'accent-border': !focused}">
<input mdInput placeholder="{{placeholder}}" type="{{type}}" class="form-control" required
(focus)="focused = true" (blur)="focused = false" [(ngModel)]="inputValue" (keyup)="setNewValue()">
</md-input-container>
</div>
In my project Material works OK, just the issue with validation
What is the use-case or motivation for changing an existing behavior?
It would be pretty good, if form validation with or without Angular Material usage will be the same, or, please, tell us what should we write, to get work the validation with material's input in nested components.
Which versions of Angular, Material, OS, TypeScript, browsers are affected?
Versions:
"@angular/material": "^2.0.0-beta.8",
"@angular": "^4.2.6",
Ubuntu 16.04