title: disable FormGroup by using Validators
body: <p>I had <code>formArray</code> checkbox on my <code>checkboxForm</code>, I need to disabled button submit if no checkbox are <code>checked</code>, I had implement custom validator on my <code>checkboxForm</code>, this is what I had tried;</p>
  
  <p><strong>Ts file</strong></p>
  
  <pre><code>  get formReceivedSummons() {
      return this.checkboxForm.get('receivedSummons') as FormArray;
    }
  
    ngOnInit() {
      this.checkboxForm = this.formBuilder.group({
        receivedSummons: this.formBuilder.array([])
      });
      this.getReceivedSummons();
    }
  
    getReceivedSummons() {
      this.receivedSummonsSubscription = this.inquiryStore.summons$
        .subscribe(receivedSummons =&gt; {
          this.receivedSummons = receivedSummons;
        });
    }
  
    addCheckboxes() {
      this.formReceivedSummons.setValue([]);
      this.formReceivedSummons.setValidators([minSelectedCheckboxes(1)]);
      this.receivedSummons.data.items.map(x =&gt; {
        this.formReceivedSummons.push(
          this.formBuilder.group({
            itemNo: [x.itemNo],
            isChecked: false,
          }));
      });
    }
  
  
  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>I had place validators at <code>formArray</code> which is  <code>this.formReceivedSummons.setValidators([minSelectedCheckboxes(1)]);</code></p>
  
  <p>this is what I had implement in <strong>html file</strong></p>
  
  <pre><code>    &lt;form [formGroup]="checkboxForm" (ngSubmit)="submitSelectedCheckbox()"&gt;
          &lt;ng-container formArrayName="receivedSummons" *ngFor="let summon of formReceivedSummons.controls; let i = index"&gt;
              &lt;ng-container [formGroupName]="i"&gt;
                  &lt;input type="checkbox" formControlName="isChecked"&gt; {{summon.value.itemNo}}
        &lt;/ng-container&gt;
      &lt;/ng-container&gt;
      &lt;button [disabled]="!checkboxForm .valid"&gt;submit&lt;/button&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>my checkboxForm button have been disabled, but if I checked one <code>checkbox</code> it should be enabled, but it didnt. I'm not sure how to solve thw problems, could use some guide and guidance to solve this.</p>
  
  <p><strong>Update</strong></p>
  
  <p>based on my finding in google and So, this is the close I can get, </p>
  
  <pre><code>  addCheckboxes() {
      this.formReceivedSummons.setValue([]);
      this.receivedSummons.data.items.map(item =&gt; {
        this.formReceivedSummons.push(
          this.formBuilder.group({
            itemNo: [x.itemNo]
            isChecked: [false, Validators.requiredTrue],
          }));
      });
    }
  </code></pre>
  
  <p>by using <code>Validators.requiredTrue</code>, it need two checkboxes to be selected, then it will enable the button,but my requirement I need at least one checkbox to be select than it will enable the button submit form</p>