gpt4 book ai didi

angular - 无法找到路径“myFormArray -> [index] -> myProperty”的控件

转载 作者:行者123 更新时间:2023-12-02 20:54:18 25 4
gpt4 key购买 nike

我正在尝试使用 Angular ReactiveForms 生成动态表单。目前,我收到错误无法找到路径为“myFormArray -> [index] -> myProperty”的控件。我已经检查过在互联网上找到的一些答案但没有成功。这是我的代码:

HTML:

<form [formGroup]="myForm">
<div formArrayName="myFormArray" *ngFor="let ctrl of foo.controls; let i=index">
<div [formGroupName]="i">
<input matInput type="text" formControlName="myProperty">
</div>
</div>
</form>

TS:

export class MyClass implements OnChanges {

@Input() myData: any;

myForm: FormGroup;

get foo(): FormArray{
return <FormArray>this.myForm.get('myFormArray');
}

constructor(private fb: FormBuilder) { }

ngOnChanges() {
if (!this.myForm) {
this.myForm = this.fb.group({
myFormArray: this.fb.array([this.buildMyFormArray()])
});
}

this.myForm.setControl('myFormArray', this.fb.array(myData || []));
}

buildMyFormArray(): FormGroup {
return this.fb.group({
myProperty: ''
});
}
}

myData 来自父级作为组件中的输入,它看起来像

myData: [
{ myProperty: 'John Doe' },
{ myProperty: 'Jane Doe' },
{ myProperty: 'Jack Doe' }
]

数据数组中的每个项目更改中间的索引都会发生错误。

你能帮我吗?谢谢

最佳答案

您的 myFormArray 控件应该是 FormGroupFormArray,但您正在创建 FormArray FormControls。

所以让我们尝试以下操作:

this.myForm.setControl('myFormArray', 
this.fb.array((this.myData || []).map((x) => this.fb.group(x))));

<强> Ng-run Example

关于angular - 无法找到路径“myFormArray -> [index] -> myProperty”的控件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49240118/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com