通过使用验证器禁用FormGroup [英] disable FormGroup by using Validators

问题描述

我在checkboxForm上有formArray复选框，如果没有checked复选框，我需要禁用按钮提交，我在checkboxForm上实现了自定义验证器，这是我尝试过的；

I had formArray checkbox on my checkboxForm, I need to disabled button submit if no checkbox are checked, I had implement custom validator on my checkboxForm, this is what I had tried;

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;
}

我在this.formReceivedSummons.setValidators([minSelectedCheckboxes(1)]);的formArray位置放置了验证器

I had place validators at formArray which is 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，则应该将其启用，但没有启用.我不确定如何解决问题，可以使用一些指导和指导来解决此问题.

my checkboxForm button have been disabled, but if I checked one checkbox 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.

更新

根据我在google中的发现，因此，这是我可以获得的结局，

based on my finding in google and So, this is the close I can get,

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

by using Validators.requiredTrue, 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

推荐答案

进行如下操作:

导出功能.像这样的东西:

export a function. something like this:

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方法中删除添加验证器.

and remove add validators from your addCheckboxes method.

不要紧，如果在u上更改任何数据时，是否在receivedSummons FormArray中添加或删除行，将执行customValdiator函数并将该表单作为参数传递，并且您可以访问当前的receiveSummons值以检查是否有效

dont matter if u add or remove rows to receivedSummons FormArray when u change any data on the form angular will execute customValdiator function and pass the form as argument and you have access to current receivedSummons values for valid which is checked.

这篇关于通过使用验证器禁用FormGroup的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！