Question

我有一个html代码，我在其中迭代一个数组：

<div class="container">
  <ol *ngFor="let g of guides">
    <button  type="button" class="form-control" (click)="open(g)" [class.not-confirmed]="!g.confirm" [class.confirmed]="g.confirm">{{g.description}}</button>
    <div [hidden]="!g.canOpen" style="text-align: center">
      <p>test</p>
      <label>Zapoznałem się</label>
      <input type="checkbox" [(ngModel)]="g.confirm">
    </div>
  </ol>
  <button class="btn btn-default form-control" (click)="save()">Save</button>
</div>

是否可以编写自定义验证器来检查是否勾选（选中）所有复选框，然后点击“保存”的最后一个按钮？我开始编写一些代码作为reactive forms，但对我来说很难： 1.如何处理将根据数组大小生成的多个复选框？ 2.如何将每个复选框值添加为ngModel，该值将来自名为g.confirm的后端？

  form = new FormGroup({
    confirmation: new FormControl()
  }, CustomValidator.checkAllCheckboxes);

Answer 1

如果g.confirm是boolean，应该可以正常工作。

NgModel将更改从中提取数据的数组，然后当您单击“保存”以调用save（）函数时，可以检查创建复选框的数组以查看是否所有确认属性都为真，然后提交，或显示错误。

Answer 2

您可以在表单更改上设置侦听器并保留辅助数组以遵循该过程。一旦勾选了所有内容，请将按钮设置为false false。如下所示：

<强>打字稿

...
enabledButton: boolean;
auxiliary=[] //same size as the checkboxes number
@ViewChild('myForm') myForm: NgForm;
myForm: NgForm;
....
ngOnInit() {
    this.myForm.valueChanges.subscribe((value: any) => {
         console.log("One of the checkbox was touched");
         // here check if the all values of the auxiliary array are true
         //if so:
         this.enableButton = true
    });
}

<强> HTML

<button type="submit" [disabled]="enabledButton" ...>.....

自定义验证器，用于在ngFor循环中生成复选框

2 个答案: