[英]Angular Reactive Forms in Reusable Child Components: Problem with FormArrays: `formGroupName` must be used with a parent formGroup directive
我试图用一个例子来描述这个问题( stackblitz上的完整例子)
如果我尝试将反应式表单的某些部分以简单的“formControls”或“formGroups”的形式与子组件一起放置,则没有问题。 (参见上面 stackblitz 的例子)。 FormGroupDirective
按预期工作。
但是如果我尝试将 FormArray 放在子组件中,我会遇到麻烦,因为:
<div [formGroupName]="i">
<!--
Error: formGroupName must be used
with a parent formGroup directive.
-->
<div>
Reactive-Form 是一个简单的形式:
ngOnInit () {
this.newForm = this.fb.group({
id: [{value: '4711', disabled: this.idReadOnly}, Validators.required],
chapter: this.fb.group({
name: ['Some Chapter', Validators.required]
}),
faq: this.fb.array(this.faqArray)
});
}
如上所述, id
和chapter
没有问题,它们是在自定义子组件中实现的,例如:
<fe-input
[controlPath]="['id']"
placeholder="Child-FormControl ID"
></fe-input>
<my-form-group
[controlPath]="['chapter', 'name']"
placeholder="Child-FormGroup Chapter"
[required]="true"
>
</my-form-group>
在 stackblitz 上的应用程序中,您将看到工作部分“ID”和“章节”。
与formArray
相同的方法:
<my-form-array
[controlPath]="['faq']"
placeholder="Child-FormArray FAQ"
[required]="true"
></my-form-array>
应该按我的预期工作,但是<div [formGroupName]="i">
仅在子组件中导致上面已经提到的错误:
Error: formGroupName must be used
with a parent formGroup directive.
如果我在原始文件中使用它(定义反应形式的位置),它可以正常工作。
我很困惑,也许我只是忽略了一个简单的问题? 有人能帮我吗? 整个示例可在此处在线获得:( >> stackblitz )
更新1:
我已经将@yurzui 的解决方案与
viewProviders: [{
provide: ControlContainer,
useExisting: FormGroupDirective
}]
并且错误“ Error: formGroupName must be used..
”消失了。 之后,我为 formArray 字段集成了自定义组件,但它们无法获取控件值。 我想我已经接近解决方案了。 那是自定义组件:
import { Component, OnInit, Input } from '@angular/core';
import {
FormControl,
FormGroupDirective
} from '@angular/forms';
@Component({
selector: 'fe-input',
template: `
<mat-form-field>
<input
matInput
[placeholder]="placeholder"
[formControl]="control"
[required]="required"
/>
<mat-error>
This is a required field!
</mat-error>
</mat-form-field>
`,
styles: [
]
})
export class FormElementInputComponent implements OnInit {
// Values to be set:
@Input() controlPath: any;
@Input() placeholder: string;
@Input() controlValue: any;
@Input() required = false;
// That's the reuseable control
control: FormControl;
constructor(private fgd: FormGroupDirective) {}
ngOnInit() {
this.control = this.fgd.control.get(
this.controlPath
) as FormControl;
}
}
最后是my-form-array
的模板部分:
template: `
<div fxLayout="column">
<div *ngFor="let c of control.controls; index as i">
<div [formGroupName]="i">
<fe-input
[controlPath]="q"
placeholder="Question"
[required]="required"
></fe-input>
<fe-input
[controlPath]="a"
placeholder="Answer"
[required]="required"
></fe-input>
<div>
</div>
</div>
`,
首先,你的 FormArray 是一个 FormControls 的 FormArray,它的值是一个 Object,而不是 FormGroup 的 FormArray。 您必须在创建表单时进行更改
this.newForm = this.fb.group({
id: [{value: '4711', disabled: this.idReadOnly}, Validators.required],
chapter: this.fb.group({
name: ['Some Chapter', Validators.required]
}),
faq: this.fb.array(this.faqArray.map(x=>this.fb.group({
q:x.q,
a:x.a
})))
});
其次,您可以使用“其他方式”来处理 FormGroup 的 FormArray,而不是使用 [formGroupName="i"] else [formGroup]="control"。 是的
<!--remove this that not work
<div *ngFor="let c of control.controls; index as i">
<div [formGroupName]="i">
....
<div>
</div>
-->
<!--use [formGroup] -->
<div *ngFor="let c of control.controls; index as i">
<div [formGroup]="c">
....
</div>
</div>
好吧,在 formGroup 中,您需要 fe-input [controlPath]="'q'" 和 [controlPath]="'a'"
我删除了表单组,因为它也是错误的,尝试使用 [formGroup] 并使用 viewProviders: [{ provide: ControlContainer, useExisting: FormGroupDirective }]
你看到你的分叉堆栈闪电战
如果我们使用标记 formArray 进行更新
<my-form-array
[controlPath]="['faq','a','q']"
placeholder="Child-FormArray FAQ"
[required]="true"
></my-form-array>
我们可以在 ngOnInit 中更改我们的 my-form-array
this.control = this.fgd.control.get(
this.controlPath[0]
) as FormArray;
和 .html
<div *ngFor="let c of control.controls; index as i">
<div [formGroup]="c">
<fe-input *ngFor="let fields of controlPath.slice(1)"
[controlPath]="fields"
placeholder="Question"
[required]="required"
></fe-input>
</div>
因此,在您的子组件中,您必须使用formArrayName="faq"
,您将使用FormGroupDirective
从父组件获取它,而在子组件的 viewProviders 数组中,您必须像这样使用useExisting
viewProviders: [
{ provide: ControlContainer, useExisting: FormGroupDirective }
]
在你的 html
<div formArrayName="faq" *ngFor="let fa of faq['controls']; let faqIndex = index;">
<div [formGroupName]="faqIndex">
// here goes your code
</div>
</div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.