Angular 中的 FormArray - 基础知识答案

【问题标题】：FormArray in Angular - basics understandingAngular 中的 FormArray - 基础知识
【发布时间】：2019-07-31 07:17:45
【问题描述】：

我的要求就是这样。根据下面的代码，mainarray 包含 json 数组，每个对象都有 id 和 name。单击多个复选框并提交时，我只需要记录选定的 ID。我无法确切地弄清楚，所以请支持。我试过的如下：

在html中：

  <form [formGroup]="profileDetails" (ngSubmit)="onsubmit(profileDetails.value)">
    <div class="cov1" formArrayName="coverageIDs" *ngFor="let member of  mainarray;let i=index>
    <input type="checkbox" name"member" [formControlName]="i" [value]="member.id">{{member.name}}
    </div>
    </form>

在ts中：

profileDetails=new FormGroup({
            coverageIDs:new FormArray([new FormControl('')])
   })

我上网已经够多了，但我不相信任何 .即使由于模型而选择了多个复选框，即使上述情况也仅给出一个结果。请纠正我这些。

【问题讨论】：

查看您的 TypeScript 代码。您的 FormArray 包含多少个 FormControl？只有一个。但是你想要很多：mainarray 的每个元素一个。所以，就这样做吧。确保 FormArray 的每个 mainarray 元素都有一个控件。
是的，你是对的。这里只有一个表单控件。这就是为什么我只得到一个。我只是把它作为基础，因为这是我没有得到“找不到路径”错误的唯一方法。许多实际上需要在coverageID 中进行分组。
其实每个需要作为表单控件推送到表单数组中
我认为您正在混合“演示文稿”和“表单”。看看stackoverflow.com/questions/54984196/…。

标签： angular

【解决方案1】：

您可以在角材料中使用多选。 angular_material_example

【讨论】：

对不起。我只是保持这个例子简单。这是一个已经存在的代码库，里面有很多细节，我坚持使用响应式。