title: Drive material date picker control from reactive form
body: <p>I had date picker which should dynamically disable and enable by checkbox toggle click. All components from library angular material 6. And cause I using a reactive approach for my form handlers I can't simply use <code>[disable]</code> directive. I got further error:</p>
  
  <pre><code>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}, Validators.required),
    last: new FormControl('Drew', Validators.required)
  });
  </code></pre>
  
  <p>And I have idea replace <code>FormContol</code> inside <code>FormGroup</code> directly in TS, something like this:</p>
  
  <pre><code>toggleDatePicker() {
    this.isDateRange = !this.isDateRange;
    this.form.removeControl('to');
    if (this.isDateRange) {
      this.form.addControl('to', new FormControl({value: new Date(), disabled: false}))
    } else {
      this.form.addControl('to', new FormControl({value: null, disabled: true}))
    }
  } 
  </code></pre>
  
  <p>And this work for <code>input</code> tag but <code>mat-datepicker-toggle</code> remains with the initial state. <code>mat-datepicker-toggle</code> state not depending on <code>FormControl</code>.</p>
  
  <pre><code>&lt;mat-form-field&gt;
    &lt;input
      matInput
     [matDatepicker]="to"
     formControlName="to"
     [disabled]="isDateRange"
    &gt;
  &lt;mat-datepicker-toggle matSuffix [for]="to"&gt;&lt;/mat-datepicker-toggle&gt; // THIS IS NO CHANGE(
    &lt;mat-datepicker #to&gt;&lt;/mat-datepicker&gt;
  &lt;/mat-form-field&gt;
  </code></pre>
  
  <p>Independent from my <code>FormControl</code> manipulation <code>mat-datepicker-toggle</code> always in the same state:</p>
  
  <p>OFF
  <a href="https://i.stack.imgur.com/VVc6H.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/VVc6H.png" alt="enter image description here"></a>
  ON
  <a href="https://i.stack.imgur.com/kFI4E.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/kFI4E.png" alt="enter image description here"></a></p>
  
  <p>How can I manipulate <code>mat-datepicker-toggle</code> thought <code>FromControl</code>?</p>