title: Disable Angular 5 Input fields correct way
body: <p>I have a FormGroup that was created like that:</p>
  
  <pre><code>form: FormGroup;
  
  constructor(private _formBuilder: FormBuilder) { }
  
  this.form = this._formBuilder.group({
    name: ['', Validators.required],
    email: ['', Validators.required, Validators.email]
  });
  </code></pre>
  
  <p>When an event occurs I want to disable those inputs, so, in the HTML I added:</p>
  
  <pre><code>&lt;input class="form-control" placeholder="Name" name="name" formControlName="name" [(ngModel)]="name" autocomplete="off" [disabled]="isDisabled" required&gt;
  
  &lt;input class="form-control" placeholder="Email" name="email" formControlName="email" [(ngModel)]="email" email="true" autocomplete="off" [disabled]="isDisabled" required&gt;
  </code></pre>
  
  <p>Where <code>isDisabled</code> is a variable I toggle to <code>true</code> when the said event happens.<br><br>
  As you can imagine, I get the message:</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>
  
  <pre><code>  Example: 
    form = new FormGroup({
      first: new FormControl({value: 'Nancy', disabled: true}, Validators.required),
      last: new FormControl('Drew', Validators.required)
    });
  </code></pre>
  </blockquote>
  
  <p>So, with the example this warning shows and with a little search I found that I should declare my controls like:</p>
  
  <pre><code>name: [{ value: '', disabled: this.isDisabled }, Validators.required]
  </code></pre>
  
  <p>The problem is: <strong>It is not toggling between disabled/enabled when the variable changes between <code>true</code>/<code>false</code></strong><br><br>
  How is the correct way of having a variable controlling if an input is enabled or disabled?</p>
  
  <p>I don't want to do it manually (ex: <code>this.form.controls['name'].disable()</code>) because it doesn't seems a very reactive way, I would have to call it inside a good amount of methods. Probably not a good practice.</p>
  
  <p>Thx</p>