title: Angular 4 - Reactive Forms enable/disable not working
body: <p>I am having trouble enabling and disabling a form controls in my application. It is probably because the form is being enabled/disabled in an asynchronous context.</p>
  
  <p>Here is how the code is.</p>
  
  <p><strong>user.component.html</strong></p>
  
  <pre><code>&lt;form [formGroup]="form"&gt;
      &lt;input type="text" id="name" formControlName="name" /&gt;
      &lt;input type="text" id="age" formControlName="age" /&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p><strong>user.component.ts</strong></p>
  
  <pre><code>ngOnInit() {
  
       this._route.queryParams.subscribe(params =&gt; {
              getUser(params.userId).subscribe(user =&gt; {
                   this._buildForm(user);
              })
       });
  }
  
  private _buildForm(user){
      this.form = _fb.group({
          name: [{value: user.name, disabled: user.someCondition}, Validators.required],
          age: [{value: user.age, disabled: user.anotherCondition}, Validators.required]
      })
  }    
  </code></pre>
  
  <p>When the first time the user is loaded upon param change, the controls do get enabled/disabled on the basis of their relevant conditions. When the params change subsequently, the state of the controls remain the same although the values are set appropriately.</p>
  
  <p>I have tried different ways to fix this but no help. For example, I have tried the following at the end of the <code>_buildForm</code> method.</p>
  
  <pre><code>this.form.disable() //Doesn't do anything
  
  this.form.controls.name.disable(); //Doesn't help
  </code></pre>
  
  <p>One thing that does work as expected is the following (but this isn't what is required).</p>
  
  <pre><code>&lt;button (click)="form.disable()" value="Disable Form" /&gt;
  &lt;button (click)="form.enable()" value="Enable Form" /&gt;
  </code></pre>
  
  <p>What I feel is that the problem is due the fact the <code>_buildForm()</code> is being called from the asynchronous context (subscribe method).</p>
  
  <p>How can I fix this problem?</p>
  
  <p><strong>UPDATE</strong></p>
  
  <p>Please note that the Observable subscription is triggered on the basis of the navigation as below.</p>
  
  <pre><code>this._router.navigate([], {
     relativeTo: this._route,
     queryParams: {userId: 10}
  })
  </code></pre>
  
  <p><strong>UPDATE 2</strong>
  <a href="https://angular-cvf1fp.stackblitz.io" rel="noreferrer">https://angular-cvf1fp.stackblitz.io</a></p>
  
  <p>This is an easier way to understand my problem</p>