title: Angular 9 Reactive Date Of Birth Validation With Three Select Fields
body: <p>I have three form controls that are tied to three "select" type inputs:</p>
  
  <pre><code>this.visitor = this.formBuilder.group({
   dateofbirthmonth: new FormControl(null, {validators: [Validators.required]})
   dateofbirthday: new FormControl(null, {validators: [Validators.required]})
   dateofbirthyear: new FormControl(null, {validators: [Validators.required]})
  },{validators: [Validators.required]}),
  </code></pre>
  
  <p>I would like to display the following error when a user selects an option from one of the three date of birth "selects", and navigates away to another field on the form (or clicks out into the body). Meaning if they select "January" from the month drop-down then, click on the "day" select input, then the error would not show, if the user clicks into another input after filling in one of the three selects (like "firstname"), then the error would show.</p>
  
  <pre><code>&lt;div class="formfielderror" *ngIf=""&gt;Date of Birth is a required field.&lt;/div&gt;
  </code></pre>
  
  <p>I am leaning more towards a custom validation, and have played with document.activeElement combined with blur/focus, but haven't found any good solutions. I would think there is an easy solution I am missing. Also, not sure if nested formGroups can help here as well. Thoughts?</p>