时间戳

首页 > 解决方案 > 使用验证器禁用 FormGroup

angular - 使用验证器禁用 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，它应该被启用，但它没有。我不确定如何解决问题，可以使用一些指南和指导来解决这个问题。

更新

基于我在谷歌的发现，所以，这是我能得到的接近，

  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，它需要两个复选框被选中，然后它将启用按钮，但我的要求我需要至少一个复选框被选中而不是启用按钮提交表单

标签： angulartypescriptcheckboxformarrayformgroups

解决方案

当您在构造函数中初始化表单时，首先将验证器添加到表单数组中。然后在收到数据后调用该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);
    });
}

推荐阅读