Лучший способ обработки нескольких флажков в Angular при отправке

Question

Я реализовал модал, который содержит флажки и кнопку отправки, как показано ниже. Я хотел бы проверить флажки в том, что по крайней мере один должен выбрать один элемент из флажка и отправить только выбранные элементы, не все из них. Когда я отправляю элементы, я отправляю все, что я не хочу делать.

Снимок экрана

Файл TS

...

    this.form = this.fb.group({
      checkArray: this.fb.array([], [Validators.required])
    });


  }

  ngOnInit() {

    this.getAllRemarks();

    this.myform = this.fb.group({

      otherInput: null,

      // API key to bind list of items. e.g. [{id:1},{id:2}]
      reason: null
    });
  }


  onClose() {
    this.dialogbox.close();
    this.dataService.filter('Register click');

  }





  onCheckBoxChanges(e: HTMLInputElement, id: number) {
    // get current position of the changes element by ID
    const index = this.remarksList.findIndex(_ => _.id === id);
    if (!(index > -1)) return;

    // const isChecked = this.checkBoxes[index].isChecked;
    // this.masterCheckBoxes[index].isChecked = e.checked;
  }

  onSubmit() {
    // assign the changes value for the POST
    this.myform.value['reason'] = this.remarksList;

    console.log(this.myform.value);




  }

...

HTML ФАЙЛ

<h2>Add Comments</h2>
<p>Reasons for declining the inspection</p>
<form [formGroup]="myform" (ngSubmit)="onSubmit()">

  <div *ngFor="let check of this.remarksList;">
    <label>
      <input #el (change)="onCheckBoxChanges(el, check.id)" type="checkbox" [checked]="check.isChecked" />
      {{check.comment}}
    </label>
  </div>

  <br> <br>
  Other: <input type="text" formControlName="otherInput" />

  <br> <br>
  <button type="submit">Submit</button>
</form>

Answer 1

onSubmit отфильтруйте список флажков, например, this.remarksList.filter(item => item.isChecked)

onSubmit() {
  // assign the changes value for the POST
  this.myform.value['reason'] = this.remarksList.filter(item => item.isChecked);
  console.log(this.myform.value);
}

Answer 2

чтобы валидировать formGroup по мере необходимости, мы можем установить валидаторы userDefined. здесь я использовал requireCheckboxesValidator () в качестве пользовательского валидатора. это может работать

     myCheckboxGroup: new FormGroup({
           myCheckbox1: new FormControl(false),
           myCheckbox2: new FormControl(false),
         }, requireCheckboxesValidator());


     export function requireCheckboxesValidator(minRequired = 1): ValidatorFn {
       return function validate (formGroup: FormGroup) {
         let checked = 0;
         Object.keys(formGroup.controls).forEach(key => {
           const control = formGroup.controls[key];
           if (control.value === true) {
             checked ++;
           }
         });
         if (checked < minRequired) {
           return {
             requireOneCheckboxToBeChecked: true,
           };
         }return null;
       };
     }

и при отправке вы можете использовать фильтр, чтобы получить только выбранное значение

    onSubmit() {
      // assign the changes value for the POST
      this.myform.value['reason'] = this.remarksList.filter(item => item.isChecked);
      console.log(this.myform.value);
    }