title: Set value of <mat-select> programmatically
body: <p>I'm trying to set the value of 2 fields <code>&lt;input matInput&gt;</code> and <code>&lt;mat-select&gt;</code> programmatically. For text input everything works as expected however for the <code>&lt;mat-select&gt;</code> on the view this field is just like it would have a value of <code>null</code>. But if I would call <code>console.log(productForm.controls['category'].value</code> it prints correct value that I set programmatically. Am I missing something?</p>
  <p>Here is the code:</p>
  <p>form config:</p>
  
  <pre class="lang-ts prettyprint-override"><code>productForm = new FormGroup({
      name: new FormControl('', [
          Validators.required
      ]),
      category: new FormControl('', [
          Validators.required
      ]),
  });
  </code></pre>
  <p>setting value:</p>
  
  <pre class="lang-ts prettyprint-override"><code>ngOnInit() {
      this.productForm.controls['name'].setValue(this.product.name);
      this.productForm.controls['category'].setValue(this.product.category);
  }
  </code></pre>
  <p>html:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;mat-form-field&gt;
      &lt;mat-select [formControlName]=&quot;'category'&quot;
                  [errorStateMatcher]=&quot;errorStateMatcher&quot;&gt;
          &lt;mat-option *ngFor=&quot;let category of categories&quot; [value]=&quot;category&quot;&gt;
              {{category.name}}
          &lt;/mat-option&gt;
      &lt;/mat-select&gt;
  &lt;/mat-form-field&gt;
  </code></pre>