title: How should I apply conditional validation logic to a reactive form, based on the forms current values?
body: <p>I have some code like this:</p>
  <pre><code>this.form.controls[keyOf&lt;IBranchForm&gt;('vatNo')].valueChanges
                  .subscribe(change =&gt; {
                      this.setOrRemoveValidators(this.form);
                  });
  
  private setOrRemoveValidators(form: FormGroup): void {
      const vatNoIsRequired = true;
      if (vatNoIsRequired) {
          form.controls['vatNo'].setValidators(Validators.required);
      }
      else {
          form.controls['vatNo'].setValidators([]);
      }
  
      form.controls['vatNo'].updateValueAndValidity();
  }
  </code></pre>
  <p>the problem I'm facing is that I need to update the form value and validity in order to add or remove the error displayed in the UI, but of course this causes the subscribe to run again, and we get into an infinite loop.</p>
  <p>I now feel that the approach of changing a forms value or validity based on value changes is probably not the correct approach as it becomes messy with hacks to get around the issues (emitEvent: false will also not cause UI updates).</p>
  <p>So what is the correct way to approach this problem please?</p>