Question

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

addonOptions[]
hasAddons
serviceId

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

serviceId
addonName
addonId
isChecked

我遍历服务并生成serviceId匹配的动态复选框。现在我想在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

您无法使用单个formcontrol捕获单个值，您想要的是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>

动态材料复选框

2 个答案: