title: Best way to implement Angular cross field validation
body: <p>I am trying to figure out the best way to implement cross field validation in Angular.</p>
  
  <p>For example, I have a select field that makes another field mandatory.  </p>
  
  <p>I want to be able to:</p>
  
  <ul>
  <li>Change the border color of the field if it is invalid</li>
  <li>Display a * in front of the field whenever it becomes mandatory</li>
  <li>Display a specific error message that explains what validation rule is broken.</li>
  </ul>
  
  <p>So far, I came up with three solutions but they don't feel so convincing to me.</p>
  
  <ul>
  <li>Listen to select field changes and update second field's validators.</li>
  <li>Listen to both fields changes and manually perform setErrors</li>
  <li>Lift validation to formGroup (which can feel extremely cumbersome since, validation state is now stored in formGroup and not directly available in formControl).</li>
  </ul>
  
  <p>Here is a <a href="https://stackblitz.com/edit/ngx-cross-form-validation" rel="nofollow noreferrer">Stackblitz</a> implementation that demos my investigations.</p>