title: Angular <mat-select> component is not working on a FormGroup
body: <p>I'm trying to use  inside a formGroup but although it builds the component and I can navigate through options, I couldn't select any of them. When the page is loaded I can see this error : </p>
  
  <blockquote>
    <p>ERROR TypeError: "this._selectionModel.onChange is undefined"</p>
  </blockquote>
  
  <p>Here's my component.ts : </p>
  
  <pre><code>@Component({
    selector: 'app-agent',
    templateUrl: './agent.component.html',
    styleUrls: ['./agent.component.css']
  })
  export class AgentComponent implements OnInit {
  
    agents = [];
    durationInSeconds = 5;
    statusList = ['AVAILABLE', 'NOT_AVAILABLE'];
    agentForm = new FormGroup ({
      name: new FormControl(),
      status: new FormControl(this.statusList[0]),
    });
    searchForm = new FormGroup(
      {key: new FormControl()}
    );
  
    constructor(private agentService: AgentService) { }
  
    ngOnInit(): void {
      this.getAll();
    }
  
    filter(): void {
      if (this.searchForm.value.key) {
        this.getOne();
      } else {
        this.getAll();
      }
    }
  
    save(): void {
      this.agentService.save(new AgentData(this.agentForm.value.name, this.agentForm.value.status)).subscribe((data) =&gt; {
        this.agentForm.value.name = data.name;
        this.agentForm.value.status = data.status;
      }
      );
    }
  }
  </code></pre>
  
  <p>And this is the component html part : </p>
  
  <pre><code>        &lt;form [formGroup]="agentForm" (submit)="save()"&gt;
            &lt;table class="form-group" style="width: 100%; "&gt;
              &lt;div class="row" &gt;
                &lt;mat-form-field style="width: 100%; "&gt;
                  &lt;mat-label&gt;Agent name&lt;/mat-label&gt;
                  &lt;input matInput placeholder="Ex. fferchichi" formControlName="name"&gt;
                &lt;/mat-form-field&gt;
              &lt;/div&gt;
  
              &lt;div class="row"&gt;
                &lt;mat-form-field style="width: 100%;"&gt;
                  &lt;mat-label&gt;Status&lt;/mat-label&gt;
                  &lt;mat-select formControlName="status"&gt;
                    &lt;mat-option *ngFor="let status of statusList" [value]="status"&gt;
                      {{status | labelit}}
                    &lt;/mat-option&gt;
                  &lt;/mat-select&gt;
                  &lt;mat-error *ngIf="agentForm.hasError('required')"&gt;Please choose a Status&lt;/mat-error&gt;
                &lt;/mat-form-field&gt;
              &lt;/div&gt;
  
              &lt;div class="row" style="text-align: right;"&gt;
                &lt;input type="submit" class="btn btn-default" value="Save"/&gt;
              &lt;/div&gt;
  
            &lt;/table&gt;
          &lt;/form&gt;
  </code></pre>
  
  <p>It feels like the binding with formControl is read-only but I can't find out why or how to fix it.</p>