title: Disable (make read-only) text input on mat-datepicker when using a reactive form
body: <p>I am using Angular Material 2's <code>mat-datepicker</code> and want the input element disabled so the user cannot edit the value using the text input.</p>
  <p>There are <a href="https://material.angular.io/components/datepicker/overview#disabling-parts-of-the-datepicker" rel="noreferrer">detailed instructions in the Angular Material 2 docs</a> on how to disable different parts of the <code>mat-datepicker</code> however, these do not seem to cover how to disable the text input when it is part of a reactive form.</p>
  <p>The Angular Material docs suggest you disable the text input in the following way:</p>
  <pre><code>&lt;mat-form-field&gt;
                // Add the disabled attribute to the input element ======
                &lt;input disabled                          
                       matInput 
                       [matDatepicker]=&quot;dateJoined&quot; 
                       placeholder=&quot;Date joined&quot; 
                       formControlName=&quot;dateJoined&quot;&gt;
                &lt;mat-datepicker-toggle matSuffix [for]=&quot;dateJoined&quot;&gt;&lt;/mat-datepicker-toggle&gt;
  
                // Add [disabled]=false to the mat-datepicker =======
                &lt;mat-datepicker [disabled]=&quot;false&quot; 
                                startView=&quot;year&quot;  
                                #dateJoined&gt;&lt;/mat-datepicker&gt;
              &lt;/mat-form-field&gt;
  </code></pre>
  <p>However, if your datepicker is part of a reactive form the text element remains active and you get the following  message from Angular:</p>
  <blockquote>
  <p>It looks like you're using the disabled attribute with a reactive form
  directive. If you set disabled to true when you set up this control in
  your component class, the disabled attribute will actually be set in
  the DOM for you. We recommend using this approach to avoid 'changed
  after checked' errors.
  Example:
  form = new FormGroup({ first: new FormControl({value: 'Nancy', disabled: true})});</p>
  </blockquote>
  <p>I updated the <code>FormGroup</code> in the component to disable the <code>FormControl</code>, which has the desired effect of disabling the input, however, if you then get the value of the <code>FormGroup</code> using <code>this.form.value</code> the disabled form control is no longer present.</p>
  <p><strong>Is there a work around for this which does not involve having a separate template driven form using <code>ngModel</code> just for the mat-datepicker(s)?</strong></p>
  <p><strong>EDIT:</strong> added “read-only” to post title to clarify this isn’t about disabling the control - because what I was asking about was to make the input element read-only, but not disable to control itself</p>