Question

我有一个表单组，可以选择用户选择的所有复选框，并在单击按钮时将其提交。但是，如果未选中任何复选框，则必须禁用该按钮。它可以在加载时工作，但是一旦用户选中并取消选中该框，它仍然有效，并且不会更新表单的statusChange。 HTML代码：

<form [formGroup]="myform">
    <div *ngFor="let item of list$ | async">
        <input type="checkbox"> {{item.id}}<br>
    </div>
</form>
<button type="button" (click)="continue()" [disabled]="disableBtn$ | async" > Continue</button>

角度代码：

this.myform = this.fb.group({
    listOfSelected: this.fb.array([], Validators.minLength(1))
});

this.myform.statusChanges
    .pipe(distinctUntilChanged())
    .subscribe((status: string) => console.log(status))

Answer 1

我在项目中使用了allOf的{{1}}验证程序。此验证器用于用户必须至少选择所有上述复选框的情况。可以直接在组件中使用它，而无需创建任何自定义验证功能。

在创建这样的formGroup时，您只需在ts文件中提及@rxweb/reactive-form-validators验证程序即可：

RxwebValidators.allOf

您可以在app.component.ts中的ReactiveFormConfig中设置errorMessage，如下所示：

  ngOnInit() {
            this.employeeInfoFormGroup = this.formBuilder.group({
                department:[''],
                projectDomains:['', RxwebValidators.allOf({matchValues:["ECommerce", "Banking","Educational","Gaming"]})], 
            });
        }

这是完整的HTML：

ReactiveFormConfig.set({"validationMessage":{"allOf":"You must select all options"}});

以下是完整的组件：

<div>
    <form [formGroup]="employeeInfoFormGroup">
      <div class="form-group">
        <label>Project Domains</label>
        <div class="form-check" *ngFor="let tag of projectDomainsArray; let i = index;">
          <h4>
            <input (click)="addProjectDomain($event.target,i)"  type="checkbox" value="{{tag}}" /> {{tag}}
          </h4>
        </div>
        <br>
        <small class="form-text text-muted">You must select atleast all option provided in the config parameters.</small><br>
        <small class="form-text text-danger" *ngIf="employeeInfoFormGroup.controls.projectDomains.errors">{{employeeInfoFormGroup.controls.projectDomains.errors.allOf.message}}</small><br>
      </div>
      <button [disabled]="!employeeInfoFormGroup.valid" class="btn btn-primary">Submit</button>
    </form>
  </div>

Working example的allOf验证程序

FormGroup验证多个复选框

1 个答案: