Angular 多个复选框的FormGroup验证

我有一个formgroup，它选择用户选择的所有复选框，并在单击按钮时提交。但是，当没有选中复选框时，必须禁用该按钮。它在加载时工作，但一旦用户选中并取消选中该框，它仍然有效，并且不会更新表单的状态更改。 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>

---

我在我的项目中使用了

@rxweb/反应式表单验证器的
allOf
验证器。此验证器用于用户必须至少选择所有提到的复选框的情况。它可以直接在组件中使用，而无需创建任何自定义验证函数

创建表单组时，您只需在ts文件中提到
RxwebValidators.allOf
validator，如下所示：

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

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

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

以下是完整的HTML：

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

所有验证器的
我正在寻找FormBuilder@Developer这也可以与Angular FormBuilder一起使用。我已经用Angular FormBuilder更新了stackblitz。
<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>

  import { Component, OnInit } from '@angular/core';
import { FormGroup } from "@angular/forms"
import { RxFormBuilder, RxwebValidators } from '@rxweb/reactive-form-validators';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-allOf-add-validator',
  templateUrl: './all-of-add.component.html'
})
export class AllOfAddValidatorComponent implements OnInit {
  employeeInfoFormGroup: FormGroup
  projectDomains: string[] = [];
  projectDomainsArray: string[] = ["ECommerce", "Banking", "Educational", "Gaming"];

  constructor(
    private formBuilder: RxFormBuilder, private http: HttpClient) { }

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

  addProjectDomain(element: any, index: number) {
    var indexOf = this.projectDomains.indexOf(element.value);
    element.checked ? this.projectDomains.push(element.value) : this.projectDomains.splice(indexOf, 1);
    this.employeeInfoFormGroup.controls.projectDomains.setValue(this.projectDomains);
  }
}