title: How to set "At least one field should be filled out" validation in Angular 7 with reactive forms?
body: <p>I have one reactive form in angular 7 which has three fields email, phone and pager. My requirement is that at least one of them should be filled out by user otherwise we should throw error like this "Please specify one of the notifications (Email, SMS or Pager)."</p>
  
  <p>I have tried writing a custom notification but its not working. Could you please help me that where I am going wrong.</p>
  
  <p>Below is my HTML code:</p>
  
  <pre><code>&lt;form class="form-horizontal" [formGroup]="editorForm"&gt;
    &lt;div class="form-group" required&gt;
        &lt;label for="emailAdressInput"&gt;Email Addresses&lt;/label&gt;
        &lt;input type="text" id="emailAdressInput" formControlName="emailAdresses"&gt;
    &lt;/div&gt;
  
  &lt;div class="form-group" required&gt;
        &lt;label for="phoneNumberInput"&gt;Email Addresses&lt;/label&gt;
        &lt;input type="text" id="phoneNumberInput" formControlName="phoneNumber"&gt;
    &lt;/div&gt;
  
  &lt;div class="form-group" required&gt;
        &lt;label for="pagerNumberInput"&gt;Email Addresses&lt;/label&gt;
        &lt;input type="text" id="pagerNumberInput" formControlName="pagerNumber"&gt;
  &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>Below is component.ts code:</p>
  
  <pre><code>this.editorForm = this._formBuilder.group({
            displayLabel: ['', Validators.required],
            emailAdresses: [''],
            phoneNumber: [''],
            notification: this._formBuilder.group({
              pagerNumber: [''],
              phoneNumber: [''],
              emailAdresses: ['']
            }, this.atLeastOneValidator()),
            pagerNumber: [''],
         });
  
         public atLeastOneValidator = () =&gt; {
           return (controlGroup) =&gt; {
             let controls = controlGroup.controls;
              if ( controls ) {
                  let theOne = Object.keys(controls).find(key=&gt; controls[key].value!=='');
                 if ( !theOne ) {
                  return {
                      atLeastOneRequired : {
                          text : 'At least one should be selected'
                      }
                  }
              }
          }
          return null;
      };
  };
  </code></pre>