title: How to add custom validator to a FormArray?
body: <p>I want to add custom validator to form in order to prevent mat-step switching to next step. All works well when I use FormGroups but I fail to achieve validation when I have to use FormArray.</p>
  
  <p>I've tried at least two variants of assigning validator on form initialization:</p>
  
  <ul>
  <li>inside array</li>
  </ul>
  
  <p><code>statuses: this._formBuilder.array([this.createStatus()], defaultStatusValidator())</code></p>
  
  <ul>
  <li>inside parent form of array</li>
  </ul>
  
  <p><code>this.productionLineStatuses = this._formBuilder.group({statuses: this._formBuilder.array([this.createStatus()])}, 
  {validator: defaultStatusValidator()});</code></p>
  
  <p>But this attempts are causing error (probably when casting validator):</p>
  
  <pre><code>TypeError: Cannot convert undefined or null to object 
      at Function.keys (&lt;anonymous&gt;)
      at FormGroup.validate [as validator] (default-status.directive.ts:6)
      at FormGroup._runValidator (forms.js:3438)
      at FormGroup.updateValueAndValidity (forms.js:3399)
      at new FormGroup (forms.js:4097)
      at FormBuilder.group (forms.js:7578)
      at CreateProductionLineComponent.ngOnInit (create-production-line.component.ts:31)
  </code></pre>
  
  <p>In the following case error is not thrown, but validator is not working too.
  Here is rest of my code and my custom validator:</p>
  
  <pre class="lang-js prettyprint-override"><code>ngOnInit() {
      this.productionLineDetails = this._formBuilder.group({
        productType: ['', Validators.required],
        language: ['', Validators.required],
        name: ['', Validators.required],
        description: [''],
      });
      this.productionLineStatuses = this._formBuilder.group({
        statuses: this._formBuilder.array([
          this.createStatus()
        ])
      }, defaultStatusValidator());
      this.statuses = this.productionLineStatuses.get('statuses') as FormArray;
      this.statusError = false;
    }
  </code></pre>
  
  <p>validator:</p>
  
  <pre class="lang-js prettyprint-override"><code>export function defaultStatusValidator(): ValidatorFn {
      return function validate (statuses: FormArray) {
      let defaultCounter = 0;
      Object.keys(statuses.value.controls).forEach(key =&gt; {
          const control = statuses.value.controls[key];
  
          if (control.value.default == true) {
              defaultCounter ++;
          }
        });
      return (defaultCounter &gt; 1) ? {moreThanOneStatusIsDefault: true} : null;
      };
  }
  </code></pre>
  
  <p>How should I properly add validator to FormArray?</p>