I use Angular7 with Angular Material, I have a form which contain a component which contain a mat-select. The select in the form out of my component work but not the one into my component.
Viewable on this stackblitz : https://stackblitz.com/edit/angular-hqkcgq
The actual result is that submiting form don't send the value of the select, but it have to. You can see in console when submiting the form.
edit: the stackblitz is edited and now work as I want
For future, please add all relevant code to the question itself. A StackBlitz is great, but it should just be an addition to the question :)
But to your code, in your child component you need to provide ControlContainer. So add to your code:
import { ControlContainer, NgForm } from '@angular/forms';
@Component({
selector: 'my-comp',
templateUrl: './my-comp.component.html',
viewProviders: [ { provide: ControlContainer, useExisting: NgForm } ]
})
Please refer to the article by the awesome Alexey Zuev: Nested Template driven Forms
As a sidenote, in all places you are providing [ngModel]="''", you can just use ngModel to register the form control.
