动态材质复选框

Question

我有一系列具有以下结构的服务：

• addonOptions[]
• hasAddons
• serviceId

addonOptions[] 具有以下结构的对象

• serviceId
• addonName
• addonId
• isChecked

我遍历服务并生成serviceIds 匹配的动态复选框。现在我想默认选中复选框，以防isChecked 为真。但以下方法不起作用：

<ng-container *ngFor="let service of serviceOptions; let i = index">
    <label *ngIf="service.hasAddons"><b>AddOns</b></label>
    <p *ngFor="let addon of service.addonOptions">
        <ng-container *ngIf="service.serviceId == addon.serviceId">
            <md-checkbox
                formControlName="addonName"
                type="checkbox"
                [ngModel]="addon.isChecked"
                [checked]="true"
                (change)="selectServiceAddon($event.checked,addon)">
                    {{ addon.addonName }}
                </md-checkbox>
        </ng-container>
    </p>
</ng-container>

Answer 1

您不能使用单个表单控件捕获单个值，您需要的是一个 formArray，我们将选中的项目推送到其中。这是一个简化的示例，您正在迭代的数据如下所示：

addonOptions = [{addonName:"name1", isChecked: false},
                {addonName:"name2", isChecked: true},
                {...}]

当我们构建表单时，我们只声明一个空的表单数组：

this.myForm = this.fb.group({
  addons: this.fb.array([])
});

那么如果在我们提交表单之前我们真的不需要关心值，我们可以在提交表单之后给表单设置值。

所以在模板中我们只是像这样迭代你拥有的数组：

<div *ngFor="let addon of addonOptions">
  <input type="checkbox" [(ngModel)]="addon.isChecked" [ngModelOptions]="{standalone: true}"> 
     {{addon.addonName}}
</div>

并且不要添加任何表单控件。

在提交时，我们过滤 isChecked 为 true 的值，并将过滤后的数组应用为 formArray，如下所示：

onSubmit() {
  let formArr = this.addonOptions.filter(x => x.isChecked === true)
  this.myForm.setControl('addons', this.fb.array([...formArr]));
}

DEMO

如果需要，您还可以在选中/取消选中时动态添加/删除字段，然后对此进行一些衍生：https://stackoverflow.com/a/43424244/6294072

Answer 2

你可以尝试使用：

<md-checkbox 
  formControlName="addonName" 
  type="checkbox" 
  [checked]="addon && addon.isChecked" 
  (change)="selectServiceAddon($event.checked,addon)">
  {{addon.addonName}}
</md-checkbox>