Simple Angular2 Reactive Form control enable state change
<p>I have a form with <code>first_name</code> and <code>last_name</code> fields.</p>

<p>When both of these fields have a value entered, I wish to <strong>enable</strong> another formControl in the same form.</p>

<p>I know I can subscribe to the changes like this:</p>

<pre><code>  createForm() {
    this.myForm = new FormGroup({
      first_name: this.first_name,
      last_name: this.last_name,
      email: this.email,
      mobile: this.mobile,
      salutation: this.salutation
    });
    this.myForm.valueChanges.subscribe(data =&gt; console.log('form changes', (!data.first_name == !data.last_name)));
  }
</code></pre>

<p>which logs to the console and shows 'true' when both values are set.</p>

<p>You can see from <a href="https://github.com/angular/angular/issues/11271" rel="nofollow noreferrer">this thread</a> on angular github that we cannot/should not set that to a property and bind <code>[disabled]=&lt;booleanProperty&gt;</code> (and the core team seem to still be working on this issue).</p>

<p>So how do I use the result from my valueChanges stream above to actually set the other control to an enabled state?</p>

<p>In the OnInit it is disabled as per the guides:</p>

<pre><code>this.salutation = new FormControl({value:'', disabled: true}, Validators.required); 
</code></pre>

<p><strong>UPDATE</strong></p>

<p>Sorry I forgot to mention that I already tried this, in the OnInit:</p>

<pre><code>this.myForm.valueChanges.subscribe(data =&gt; {
  if (!data.first_name == !data.last_name) {
    this.salutation.enable();
  };
}) 
</code></pre>

<p>That does not work, it throws console error: <code>Maximum call stack size exceeded</code></p>