title: Angular reactive forms disable input when checkbox checked
body: <p>I have a checkbox and input. What I want to do is to disable the input when the checkbox is checked, and enable the input when the checkbox is unchecked.</p>
  
  <p>This is my form group:</p>
  
  <pre><code>this.workingTime = this.fb.group({
    toggle: false, // this is the checkbox
    from: [{ value: null, disabled: false }],
    to: [{ value: null, disabled: false }]
  });
  get toggleControl() { return this.workingTime.get('toggle'); }
  </code></pre>
  
  <p>I was sure this will work:</p>
  
  <pre><code>&lt;input [disabled]="toggleControl.value"&gt;
  </code></pre>
  
  <p>But I'm getting a warning in the console:</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.</p>
  </blockquote>
  
  <p>I can't use</p>
  
  <pre><code>from: [{ value: null, disabled: this.toggleControl.value }]
  </code></pre>
  
  <p>Because toggleControl is not yet accessible.</p>
  
  <p>Any ideas? Thanks</p>