title: The correct method to set a default selected option using the mat-select component
body: <p>Using Angular 2 and Angular Material 6.4.7</p>
  
  <p>I need to set a default selected option using the mat-select component.</p>
  
  <p>The following code works as it should and sets the default value when I do not use the [formControl] binding.</p>
  
  <p>example below:</p>
  
  <pre><code>&lt;mat-form-field&gt;
      &lt;mat-select [(value)]="currentYear" placeholder="Select A Year" [formControl]="year.get('year')" &gt;
          &lt;mat-option *ngFor="let y of yearsArr;" [value]="y"&gt;{{ y }}&lt;/mat-option&gt;
      &lt;/mat-select&gt;
  &lt;/mat-form-field&gt;
  </code></pre>
  
  <p>The current year (currentYear) is a variable that gets set the value of the current year.</p>
  
  <p>However when I use the form control binding it fails to set the default option on the mat-select component.</p>
  
  <p>example below:</p>
  
  <pre><code>&lt;mat-form-field&gt;
      &lt;mat-select [(value)]="currentYear" placeholder="Select A Year" [formControl]="year.get('year')" &gt;
          &lt;mat-option *ngFor="let y of yearsArr;" [value]="y"&gt;{{ y }}&lt;/mat-option&gt;
      &lt;/mat-select&gt;
  &lt;/mat-form-field&gt;
  </code></pre>
  
  <p>I searched stack overflow and came across this solution which works however I get a warning in the browsers console, I'm not sure if this is the correct method of achieving this.</p>
  
  <p>example below:</p>
  
  <pre><code>&lt;mat-form-field&gt;
      &lt;mat-select [(ngModel)]="currentYear" placeholder="Select A Year" [formControl]="year.get('year')" &gt;
          &lt;mat-option *ngFor="let y of yearsArr;" [value]="y"&gt;{{ y }}&lt;/mat-option&gt;
      &lt;/mat-select&gt;
  &lt;/mat-form-field&gt;
  </code></pre>
  
  <p>The warning I get is below:</p>
  
  <blockquote>
    <p>It looks like you're using ngModel on the same form field as
    formControl.    Support for using the ngModel input property and
    ngModelChange event with    reactive form directives has been
    deprecated in Angular v6 and will be removed    in Angular v7.
         For more information on this, see our API docs here:   <a href="https://angular.io/api/forms/FormControlDirective#use-with-ngmodel" rel="nofollow noreferrer">https://angular.io/api/forms/FormControlDirective#use-with-ngmodel</a></p>
  </blockquote>
  
  <p>I have read the above output, but still can't understand how to fix this.</p>
  
  <p>Any help to clarify or enlighten me on the correct method of achieving this would be greatly appreciated.</p>