title: Angular 7 Register with roles
body: <p>I want to validate a group checkbox in register form. The checkboxes are roles, 3 roles. The validation is at least one checkbox selected.
  I have this error: this.controls is undefined.
  My code:</p>
  
  <pre><code> ngOnInit() {
        this.roleService.getRoles().subscribe((data: any) =&gt; {
          data.forEach(obj =&gt; obj.selected = false);
          this.roles = data;
         });
  
      /************************validators****************************************/
  
      this.registerForm = this.formBuilder.group({
        name: ['', [Validators.required, Validators.maxLength(20)]],
        surname: ['', [Validators.required, Validators.maxLength(20)]],
        email: ['', [Validators.required, Validators.email]],
        password: ['', [Validators.required, Validators.minLength(6)]],
        confirmPassword: ['', Validators.required],
      }, {
        validator: MustMatch('password', 'confirmPassword'),
        roles: new FormArray(this.roles, minSelectedCheckboxes(1))
  
      });
  } 
  
  
   export function minSelectedCheckboxes(min = 1) {
     const validator: ValidatorFn = (formArray: FormArray) =&gt; {
       const totalSelected = formArray.controls
  
       .map(control =&gt; control.value)
       .reduce((prev, next) =&gt; next ? prev + next : prev, 0);
  
        return totalSelected &gt;= min ? null : { required: true };
     };
      return validator;
    }
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>  &lt;div class="col-md-4" *ngFor="let role of roles; let i = index"&gt;
        &lt;div class="form-group bmd-form-group form-check"&gt;
            &lt;label class="form-check-label"&gt;
               &lt;input class="form-check-input" type="checkbox" value="{{ role.id }}" [checked]="role.selected"  (change)="updateSelectedRoles(i)"&gt;
              &lt;span class="form-check-sign"&gt;
                   &lt;span class="check"&gt;&lt;/span&gt;
              &lt;/span&gt;
              {{ role.name }}
             &lt;/label&gt;
         &lt;/div&gt;
     &lt;/div&gt;
  </code></pre>