Problem with mat-select when submitting form in angular

Question

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

AJT82 AJT82 · Accepted Answer · 2019-09-20T07:58:26

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.

Your forked StackBlitz

Problem with mat-select when submitting form in angular

1 Answers