кнопка выключения на определенном флажке выбора

Question

У меня было условие в моем реактиве form, где один checkbox выбран, отправка button будет включена, и если не выбрано ни одного checkbox, он останется отключенным, проблема в том, что у меня selectAllфункция, которая, если я нажал, она будет устанавливать все флажки и разрешить отправить button, а затем, если я отменяю выбор отдельных checkbox после выбора всех функций , кнопка отправки должна быть включена, пока все флажки не будутОтмените выбор, это то, что я пытался:

TS файл

  selectAll() {
    this.formReceivedSummons.controls.map(value => value.get('isChecked').setValue(true));
    return this.disabledButton = false;
  }

  changeCheck(event){
    this.disabledButton = !event.target.checked;
  }

HTML-файл

<div *ngIf="isShowResponse">
    <p>Inquiry Response</p>
    <form [formGroup]="form" (ngSubmit)="submitSelectedCheckboxes()">
        <ng-container formArrayName="receivedSummons" *ngFor="let 
            summon of formReceivedSummons.controls; let i = index">
            <ng-container [formGroupName]="i">
                <input type="checkbox" formControlName="isChecked"
        (change)="changeCheck($event)">
  {{ summon.get('isChecked').value ? 'selected' : 'select' }}
      </ng-container>
    </ng-container>
    <button [disabled]="disabledButton">Submit</button>
</form>
<button (click)="selectAll()">Select All</button>
</div>

предполагаетсяпосле функции select all кнопка отправки будет активна до тех пор, пока все checkbox не будут выбраны по отдельности, затем она будет отключена, это мое stackblitz demo , я мог бы использовать любое предложение для решения этой проблемы,

Answer 1

«классическое решение» - это создание собственного валидатора ошибок

Представьте, что у вас есть что-то вроде

  options=["option 1","option 2","option 2"]
  form=new FormGroup({
      prop1:new FormControl(),
      receivedSummons:new FormArray(this.options.map(x=>new FormControl()),this.selectAtLeastOne())
  })

  selectAtLeastOne()
  {
    return (formArray:FormArray)=>{
      return formArray.value.some(x=>x)?null:{error:"At least one"}
    }
  }

Вам нужно только

  <button [disabled]="form.invalid">submit</button>

Заполненная формапохоже на

  <div [formGroup]="form">
  <input formControlName="prop1">
  <div formArrayName="receivedSummons">
    <div *ngFor="let control of form.get('receivedSummons').controls;let i=index" >
      <input type="checkbox" [formControlName]="i">{{options[i]}}
    </div>
  </div>
  <button [disabled]="form.invalid">submit</button>
  </div>

ПРИМЕЧАНИЕ. Я выбираю использовать formArray для FormControls, а не для FormArray для formGroups. Если вы хотите использовать formArray для FormGroups, код будет выглядеть как

  form2=new FormGroup({
      prop1:new FormControl(),
      receivedSummons:new FormArray(
         this.options.map(x=>new FormGroup({
           isChecked:new FormControl()
           })),this.selectAtLeastOne2())
  })

  selectAtLeastOne2()
  {
    return (formArray:FormArray)=>{
      return formArray.value.some(x=>x.isChecked)?null:{error:"At least one"}
    }
  }

И .html

  <div [formGroup]="form2">
  <input formControlName="prop1">
  <div formArrayName="receivedSummons">
    <div *ngFor="let control of form.get('receivedSummons').controls;let i=index" [formGroupName]="i" >
      <input type="checkbox" formControlName="isChecked">{{options[i]}}
    </div>
  </div>
  <button [disabled]="form2.invalid">submit</button>
  </div>

Вы можете увидеть две формы в stackblitz

Обновлено Я добавляю две функции для проверки / снятия галочки со всех

  selectAll(select: boolean) {
    this.form.get("receivedSummons").setValue(this.options.map(x => select));
  }

  selectAll2(select: boolean) {
    this.form2.get("receivedSummons").setValue(
      this.options.map(x => {
        return { isChecked: select };
      })
    );
  }

Проверка, чтобы проверить / снять все отметки (см. Как я использую переменную referencence для передачи, если проверено или нет checkBox

  <input #check1 type="checkbox" (change)="selectAll(check1.checked)">Check All

Answer 2

В html укажите ссылку на входе "#checkboxes"

<input type="checkbox" formControlName="isChecked" #checkboxes (click)="changeCheck()">

В тс,

Мы можем получить все значения флажков, используя @ViewChildren

@ViewChildren("checkboxes") checkboxes: QueryList<ElementRef>; 

ViewChildren, QueryList, ElementRef для импорта из 'angular/core'

changeCheck(){
    let flag= true;
     this.checkboxes.forEach((element) => { // loop all checkboxes to find checked boxes
      if(element.nativeElement.checked){
        flag=false // if atleast one checkbox checked, put the flag flase
      }
    });

    this.disabledButton = flag;
  }

Рабочий код в Stackblitz

Answer 3

Попробуйте следующий код:

  changeCheck(event){
    let flag = true
    for (let summon of this.formReceivedSummons.controls){
      if(summon.get('isChecked').value) {
        flag = false
      }
    }
    this.disabledButton = flag
  }