title: How to use mat-select with reactive forms formarray angular
body: <p>So far, I've written below code</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;form [formGroup]="testForm"&gt;
      &lt;div formArrayName="selects"&gt;
          &lt;mat-form-field *ngFor="let select of selects.controls; let i = index"&gt;
              &lt;mat-select [formControlName]="i"&gt;
                  &lt;mat-option *ngFor="let option of select.value.options" [value]="option"&gt;{{ option }}&lt;/mat-option&gt;
              &lt;/mat-select&gt;
          &lt;/mat-form-field&gt;
      &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p><strong>In the component file</strong></p>
  
  <pre class="lang-js prettyprint-override"><code>testForm: FormGroup;
  
  get selects() {
    return this.testForm.get('selects') as FormArray;
  }
  
  data = [{
    initial: 'one',
    options: ['two', 'three', 'four']
  }, {
    initial: 'a',
    options: ['b', 'c', 'd']
  }];
  
  constructor(private formBuilder: FormBuilder) { }
  
  ngOnInit() {
    this.testForm = this.formBuilder.group({
      selects: this.formBuilder.array([]),
    });
  
    for (let i = 0; i &lt; this.data.length; i++) {
      this.selects.push(new FormControl(this.data[i]));
    }
  }
  </code></pre>
  
  <p>But this is not working so far. What I am doing wrong here?</p>
  
  <p>Find the <a href="https://stackblitz.com/edit/angular6-material-components-demo-ymqhcf" rel="nofollow noreferrer">Stackblitz here</a>.</p>
  
  <p><strong>Issue:</strong> As you can see in the stackblitz, it is not showing the initial value and if we select the option, then also it is not working and also options are disappearing from the select if we select any option.</p>