title: Angular2 Forms disable control in component with a data-bound value
body: <p>I am disabling controls when the user is not in edit mode.</p>
  
  <pre><code>this.theForm = this.builder.group({
     name: [{ value: this.model.name, disabled: !this.isEditMode}, Validators.required],
  })
  </code></pre>
  
  <p>When they change to edit mode I want the control to be enabled.  However, it seems that once this is set it will not change then the component value changes.  </p>
  
  <p>This was working when I had this in the markup:</p>
  
  <pre><code>&lt;input [disabled]="!isEditMode" type="text" formControlName="name"  /&gt;
  </code></pre>
  
  <p>This was causing a runtime warning suggesting that I handle it with the formControl.</p>
  
  <p>This is the warning:</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>Is there a way to bind this value when I setup the control?
  Do I need to loop though the controls and toggle this whenever it changes?</p>