嵌套反应表单中的错误 - 类型 'AbstractControl' 上不存在属性'controls'

Question

我关注了一个youtube视频，并关注了axact代码，但仍然收到了错误。我不知道它是否被否决了。在stackoverflow中看到了一些类似的问题，但我的情况不同。

我在模板文件中写了下面的一行，但失败了，

<div formArrayName = "brands" *ngFor="let brand of productsForm.controls.brands.controls; let i = index;">

然后在ts文件中写了一个get函数，如下

getControls() {
return this.productsForm.controls.brands.controls
}

再次失败

ts文件。。

import { Component, OnInit } from '@angular/core';
import {
FormGroup,
FormBuilder,
FormControl,
FormArray,
} from '@angular/forms';

@Component({
selector: 'app-admin-add-courses',
templateUrl: './admin-add-courses.component.html',
styleUrls: ['./admin-add-courses.component.scss'],
})
export class AdminAddCoursesComponent implements OnInit {

public videoCards: any[] = [];
productsForm: FormGroup;
products = [
{
'brand': "Apple"
},
{
'brand': "Samsung"
},
];
constructor( private fb: FormBuilder ) {}
ngOnInit(): void {
this.createForm(this.products);
}
public createForm(products) {
var arr = [];
for (var i = 0; i < products.lenght; i++) {
arr.push(this.buildProduct(products[i]));
}
this.productsForm = this.fb.group({
category: [''],
brands: this.fb.array(arr)
});
}
buildProduct(product): FormGroup {
return this.fb.group({
title: [product.brand],
value: [''],
});
}
showData() {
console.log(this.productsForm.value);
}
getControls() {
return this.productsForm.controls.brands.controls
}
}

<form [formGroup]= "productsForm" (submit)="showData()">
<div>
Category:
<input type="text" formControlName="category">
</div>
<div formArrayName="brands" *ngFor="let brand of getControls(); let i = index;">
<div formGroupName ="{{i}}">
{{ brand.get('title').value}}
</div>
</div>
<input type="submit" value="submit">
</form>

Answer 1

按预期将类型转换为FormArray。

getControls() {
return (this.productsForm.controls.brands as FormArray).controls;
}
<div formArrayName="brands" *ngFor="let brand of getControls(); let i = index;"></div>

也不要忘记从@angular/forms 导入FormAray

Answer 2

Dayand，访问控件的正确方式是使用get

<div *ngFor="let brand of productsForm.get('brands').controls;let i=index">
..
</div>

但是你不能直接在.html中使用，因为Angular不知道productsForm.get('brands')是什么类型的控件，所以通常你使用getter来指示Angular应该使用什么类型的元素

get brandsArray()
{
return this.productForms.get('brands') as FormArray
}

现在，您可以使用

<div *ngFor="let brand of brandsArray.controls;let i=index">
..
</div>

注意：我不知道谁是第一个使用form.controls.mycontrol获得控件的人，但这是一个非常非常糟糕的主意。没有人确定这种方式在未来的中有效