отключить FormGroup с помощью валидаторов

У меня был formArray флажок на моем checkboxForm, мне нужно отключить кнопку отправки, если нет флажка checked, я реализовал настраиваемый валидатор на моем checkboxForm, это то, что я пробовал;

Ts файл

  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 => {
        this.receivedSummons = receivedSummons;
      });
  }

  addCheckboxes() {
    this.formReceivedSummons.setValue([]);
    this.formReceivedSummons.setValidators([minSelectedCheckboxes(1)]);
    this.receivedSummons.data.items.map(x => {
      this.formReceivedSummons.push(
        this.formBuilder.group({
          itemNo: [x.itemNo],
          isChecked: false,
        }));
    });
  }


function minSelectedCheckboxes(min = 1) {
  const validator: ValidatorFn = (formArray: FormArray) => {
    const totalSelected = formArray.controls
      .map(control => control.value)
      .reduce((prev, next) => (next ? prev + next : prev), 0);

    return totalSelected >= min ? null : { required: true };
  };
  return validator;
}

У меня были валидаторы на formArray, что this.formReceivedSummons.setValidators([minSelectedCheckboxes(1)]);

это то, что я реализовал в html файле

    <form [formGroup]="checkboxForm" (ngSubmit)="submitSelectedCheckbox()">
        <ng-container formArrayName="receivedSummons" *ngFor="let summon of formReceivedSummons.controls; let i = index">
            <ng-container [formGroupName]="i">
                <input type="checkbox" formControlName="isChecked"> {{summon.value.itemNo}}
      </ng-container>
    </ng-container>
    <button [disabled]="!checkboxForm .valid">submit</button>
</form>

моя кнопка checkboxForm была отключена, но если я поставил галочку checkbox, она должна быть включена, но этого не произошло. Я не уверен, как решить эти проблемы, мог бы использовать какое-нибудь руководство и рекомендации, чтобы решить эту проблему.

Обновить

Основываясь на моем поиске в Google, и это все, что я могу сделать,

  addCheckboxes() {
    this.formReceivedSummons.setValue([]);
    this.receivedSummons.data.items.map(item => {
      this.formReceivedSummons.push(
        this.formBuilder.group({
          itemNo: [x.itemNo]
          isChecked: [false, Validators.requiredTrue],
        }));
    });
  }

при использовании Validators.requiredTrue необходимо выбрать два флажка, затем он включит кнопку, но мое требование: мне нужно выбрать хотя бы один флажок, чем он включит форму отправки кнопки


typescript angular checkbox formarray formgroups
person hafizi hamid    schedule 11.09.2019    source источник
comment
Валидатор работает? Эта группа форм испускает недопустимый флаг?   -  person Vitor Piovezam    schedule 11.09.2019
comment
нет, валидатор не работает, должно быть, кнопка отправки отключена, пока я не выберу один из флажков, но он не   -  person hafizi hamid    schedule 12.09.2019
comment
Если вы хотите, например, пользовательской проверки по массиву, stackoverflow.com/questions/57794118/   -  person Eliseo    schedule 12.09.2019
comment
это мой подход неправильный? @Eliseo   -  person hafizi hamid    schedule 12.09.2019

Ответы (2)


arrow_upward
0
arrow_downward

Когда вы инициализируете форму в конструкторе, сначала добавьте валидатор в массив форм. Затем после получения данных вызовите метод addCheckboxes.

form: FormGroup;
receivedSummons = [];

constructor(private formBuilder: FormBuilder) {
   this.checkboxForm = this.formBuilder.group({
     receivedSummons: new FormArray([], minSelectedCheckboxes(1))
   });

   of(this.someMethodWhichReturnReceivedSummons()).subscribe(receivedSummons => {
      this.receivedSummons = receivedSummons;
      this.addCheckboxes();
   });
}

В полях addCheckboxes

private addCheckboxes() {
    this.receivedSummons.map((o, i) => {
      const control = new FormControl(i === 0); // if first item set to true, else false
      (this.form.controls.receivedSummons as FormArray).push(control);
    });
}
person Navoneel Talukdar    schedule 12.09.2019

arrow_upward
0
arrow_downward

Сделайте что-то вроде этого:

экспортировать функцию. что-то вроде этого:

export function customValdiator(form: FormGroup) {
  const formValue = form.value;
  // with the formValue apply your own validation logic .
  if (/* HAVE ERROR */) {
    return { checkboxesRequired: true };
  } else {
    return null;
  }
}

создайте свою форму:

 this.checkboxForm = this.formBuilder.group({
      receivedSummons: this.formBuilder.array([])
    },  { validator: customValdiator });

и удалите валидаторы добавления из вашего метода addCheckboxes.

не имеет значения, добавляете ли вы строки в receivedSummons FormArray или удаляете их, когда вы меняете какие-либо данные в форме, angular выполнит customValdiator функцию и передаст форму в качестве аргумента, и у вас есть доступ к текущим значениям ReceiveSummons для валидности, которые проверяются.

person Manuel Panizzo    schedule 12.09.2019