Select 复杂表单数组中至少有一个复选框 angular

Question

我有一个反应式表单，其中包含一个复选框列表，如果其中一个被选中，将显示一个输入表单。 如何添加验证器以确保至少选中一个复选框。

这是我的 component.ts :

coveragestypes : Array<ItemPolicyModel>= 
[{id:'1', name :'type 1'},
{id : '2',name :'type 2'},
{id : '3',name :'type 3'},
{id:'4',name:'type 4'}]

      coveragesObject : any = null;
       policyForm = new FormGroup({
         coveragesObject : new FormArray([])
        })
     ngOnInit() {
          this.addCheckboxes();
      }
      addCheckboxes() {
    let formGroups: FormGroup[] = this.coveragestypes.map(coverage => {
      return new FormGroup({
         id: new FormControl(coverage.id),
         name: new FormControl(coverage.name),
         value: new FormControl("", Validators.pattern(/^-?(0|[1-9]\d*)?$/)),
         checked: new FormControl(false)
      });
     });
     this.coveragesObject =  new FormArray(formGroups);
     this.policyForm.setControl('coveragesObject', this.coveragesObject );
     }

这是我的 component.html :

    <div *ngFor="let coverage of coveragesObject.controls;let i = index; ">
    <div [formGroup]="coverage">
       <input type="checkbox" kendoCheckBox [formControl]="coverage.controls.checked" />
       {{coverage.controls.name.value}}        
      <ng-container *ngIf="coverage.controls.checked.value">
          <input type="text" [formControl]="coverage.controls.value" style="  height: 100%;max-height:10px;padding : 0.5rem 0.75rem; 
                                            border-color: rgba(0, 0, 0, 0.125);width: 40%;">
         <span style="position: absolute;padding : 0.05rem 0.25rem ;">£</span>
         <div *ngIf="coverage.controls.value.invalid"
              style="font-size: xx-small; color : red">
         {{ "newRepair.intake.policyInfo.ownrisk" | translate }}
         </div>
    </ng-container>
</div>
</div>

有人能帮帮我吗？

Answer 1

您正在寻找的是自定义表单验证器。 Angular 为我们提供了创建和传递将在表单更改时触发的验证器函数的选项。

为了简单起见，我们有一个 FormArray 包含 FormControl-s 和布尔值，代表复选框，我们应该做的事情如下

...
// Our form
form = new FormGroup({
    boxes: new FormArray(
      [],
      // Pass custom validator that will check if the array has one element with value `true` a.k.a. at least one checked
      c => {
        const atLestOneChecked = (c as FormArray).controls.find(
          x => x.value === true
        );
        if (atLestOneChecked) {
          return {};
        }
        return { error: true };
      }
    )
 });
 ...
 ngOnInit(){
    // Populate form
    new Array(10).fill(null).forEach(() => {
      (this.form.get("boxes") as FormArray).push(new FormControl(false));
    });
 }

所以我在这里所做的是将一个函数作为第二个参数传递给 new FormArray()，每次当有与 FormArray 引用相关的更改时都会调用此函数，并且基于检查 FormArray 中是否有值 true 的 FormControl 我正在获取或清除与 FormArray.

关联的错误

我没有讨论但您在创建验证器时需要知道的一些重要事项：

首先你应该总是return错误对象其次，您可以传递单个验证器或验证器数组第三，如果您需要异步验证器（例如基于 BE 响应的验证），您需要使用 AsyncValidators

这是一个有效的 stackBlitz

Select 复杂表单数组中至少有一个复选框 angular

Select at least one checkbox in a complex form array angular

angular

angular-reactive-forms