Angular 8 错误 "ERROR Error: " 找不到名称为： 'getAccountArr' " " 使用表单数组时的控件

Question

我是用 Angular 8 构建的，我正在尝试渲染输入列表并用 JSON 数据预填充它们。我正在为这个项目使用反应式表单。类型数组正在正确映射并存储在组中。我认为它与FormArrayName以及它与FormGroupName相比的位置有关。我想知道我是否需要将表单数组名称包装在表单组名称中。

查看.ts

export class View2Component implements OnInit {
// public accountArr: FormArray;
public accounts: FormArray;
public accountForm: FormGroup;
types: any = [
{
name: "Assets",
display: {
default:'Display Value',
inputType:'input'
},
type: {
default:'type Value',
inputType:'selected',
data: ['a', 'b', 'c']
},
totalDesc: {
default:'totalDesc Value',
inputType:'input'
},
underlineBefore: {
default:'underlineBefore Value',
inputType:'input'
},
underlineAfter: {
default:'underlineAfter Value',
inputType:'input'
},
reverse: {
default: false,
inputType:'checkbox'
},
print: {
default: true,
inputType:'checkbox'
},
},
{
name: "Assets",
display: {
default:'Display Value',
inputType:'input'
},
type: {
default:'type Value',
inputType:'selected',
data: ['a', 'b', 'c']
},
totalDesc: {
default:'totalDesc Value',
inputType:'input'
},
underlineBefore: {
default:'underlineBefore Value',
inputType:'input'
},
underlineAfter: {
default:'underlineAfter Value',
inputType:'input'
},
reverse: {
default: false,
inputType:'checkbox'
},
print: {
default: true,
inputType:'checkbox'
},
}
];
get getAccountArr() { return this.accountForm.get('accounts') as FormArray; }
constructor(private fb: FormBuilder) {
}
ngOnInit() {
this.accountForm = this.fb.group({
accounts: this.fb.array([])
});

this.renderAccountForm();
console.log('accountArr', this.accountForm);
}

renderAccountForm() {
this.types.map(item => {
let val = this.fb.group({
display: [item.display.default],
type: [item.type.default]
});
this.getAccountArr.push(val);
});
}
}

查看.html

<form [formGroup]="accountForm" novalidate>
<div formArrayName="getAccountArr" style="height:100px; margin:40px auto;">
<div *ngFor="let account of getAccountArr.controls; let i = index;">
<div [formGroupName]="i">
<h1 class="index-class">{{ i }}</h1>
<h1>{{ account.value.display }}</h1>
<input
type="text"
formControlName="{{ i }}"
[value]="account.value.display"
[placeholder]="account.value.displays"
/>
</div>
</div>
</div>
</form>

Answer 1

你用的 getter 不正确。 替换get getAccountArr() { return this.accountForm.get('accounts') as FormArray; } 与get accounts() { return this.accountForm.get('accounts') as FormArray; }

并删除public accounts: FormArray;

get 充当"别名"，每次引用时this.accounts都会返回 FormArray。

Answer 2

您需要替换此行

<div formArrayName="getAccountArr" style="height:100px; margin:40px auto;">

跟

<div formArrayName="accounts" style="height:100px; margin:40px auto;">

您需要为formArrayName指令提供FormArray的名称，并且getAccountArr不是表单组中现有的表单数组，它只是一个返回表单数组的属性，该数组是不同的