角度 6 动态复选框表单"Error: Cannot find control with name: 'P1'"

Question

我正在尝试找到一种方法来显示包含一列复选框的动态表单。 遵循一个很好的YouTube指南后，我的代码行为不同，不起作用。

问题：即使我可以看到表单控件名称是 P1、P2、P3.. 等 以及查找此控件的表单。它们不会加载，不会连接并返回此消息：Error: Cannot find control with name: 'P1'

所以在这里我再次寻求帮助。 或者与一个好的指南的良好链接将不胜感激。

杰伦文件

platformsArray =  [
{
platform_id: 'P1',
platform_name: "Facebook",
platform_weight: 0.5,
selected: true
},
{
platform_id: 'P2',
platform_name: "Instragram",
platform_weight: 0.7,
selected: true
},
{
platform_id: 'P3',
platform_name: "Google",
platform_weight: 0.2,
selected: true
},      
{
platform_id: 'p4',
platform_name: "AdWords",
platform_weight: 0.6,
selected: true
},
{
platform_id: 'p5',
platform_name: "Google My Business",
platform_weight: 0.15,
selected: true
}
];

比较

//platforms form
platformForm: FormGroup;


constructor(private router: Router, private fb: FormBuilder ) {

this.platformForm = fb.group({
P1: [],
P2: [],
P3: [],
p4: [],
p5: [],
platforms: this.buildPlatforms()
});

在这里我们构造控件

buildPlatforms() {
const arr = this.platformsArray.map(platform => {
return this.fb.control(platform.platform_id);
});
console.log(arr)
return this.fb.array(arr);
}

调用并提交

submit(platformForm) {
console.log(platformForm)
}

.html

<!-- platform form -->
<form [formGroup]="platformForm" (ngSubmit)="submit(platformForm.value)">
<!-- Default unchecked -->
<div *ngFor="let platform of platformsArray; let i=index" class="custom-control custom-checkbox" (ngSubmit)="submit()">
<input type="checkbox" class="custom-control-input"  [formControlName]="platform.platform_id" [id]="platform.platform_id" checked>
<label class="custom-control-label" [for]="platform.platform_id">{{platform.platform_name}}</label>
</div>

<div class="text-center">
<button type="submit" class="btn btn-success btn-md">Sign in</button>
</div>
</form>
<!-- platform form -->

请注意，我是新手。 所以我仍然试图理解这里快乐的东西。感谢您的帮助：-(

Answer 1

尝试这样的事情：

演示

<form [formGroup]="platformForm" (ngSubmit)="submit()">
<div formArrayName="platforms">
<div *ngFor="let item of platformForm.get('platforms').controls; let i = index;" [formGroupName]="i">
<div style="margin: 10px;">{{item.value | json }}</div>
<div>
<input type="checkbox" formControlName="platform_id" checked>
<label>{{platformForm.controls.platforms.controls[i].controls.platform_name.value}}</label>
</div>
</div>
<div>
<button type="submit">Submit</button>
</div>
</div>
</form>

TS：

platforms: FormArray;
platformForm: FormGroup;
constructor(private fb: FormBuilder) {
}
ngOnInit() {
this.createForm();
this.platforms = this.getData();
while (this.getData().length) {
this.platforms.removeAt(0)
}
for (let d of this.platformsArray) {
this.addMore(d);
}
}
getData() {
return this.platformForm.get('platforms') as FormArray;
}
addMore(d) {
this.getData().push(this.buildPlatforms(d));
}

createForm() {
this.platformForm = this.fb.group({
platforms: this.fb.array([this.buildPlatforms({
platform_id: null,
platform_name: null,
platform_weight: null,
selected: null
})])
});
}
buildPlatforms(data) {
if (!data) {
data = {
platform_id: null,
platform_name: null,
platform_weight: null,
selected: null
}
}
return this.fb.group({
platform_id: data.platform_id,
platform_name: data.platform_name,
platform_weight: data.platform_weight,
selected: data.selected
});
}

submit() {
console.log(this.platformForm.value)
}