title: Angular Reactive Forms - Perform Validation After Form Fields Shown / Hidden on Value Changes
body: <p>I'm working with reactive forms with various required fields to validate. Certain fields have conditional validation that should only be checked if the conditions are met. (<em>i.e. If you answered yes to the above question, please explain why)</em></p>
  
  <p>In HTML that ends up looking like this:</p>
  
  <pre><code>&lt;input type="text" [required]="did_you_answer_yes_to_the_previous_question" /&gt;
  </code></pre>
  
  <p>That way, the reactive form doesn't validate that field unless the conditions are met.</p>
  
  <p>I then check the form validity on valueChanges like so:</p>
  
  <pre><code>    this.form.valueChanges
          .pipe(
              concatMap((updatedForm: any) =&gt; {
                  if (this.form.dirty) {                      
                      this.service.udpateFormIsValid(this.form.valid);
                      this.form.markAsPristine();
                  }
  
                  return of(updatedForm);
              })
          )
          .subscribe((updatedForm: any) =&gt; {  });
  </code></pre>
  
  <p>However, the validation occurs <strong>before</strong> the angular bindings update causing false positives and negatives.</p>
  
  <p>I can easily fix it by adding a <code>.debounceTime(250)</code> after the <code>valueChanges</code> observable to alleviate the race condition, but adding a manual delay seems like an anti-pattern.</p>
  
  <p>Are there any better ways to ensure we perform the check every time the form updates but do it after angular has updated the boolean conditional bindings? </p>