angular2-在父FormGroup的子组件中验证FormControlName [英] angular2 - validating FormControlName in child component of parent FormGroup
问题描述
我有一个对应于表单/页面的角度组件,该组件正在生成不确定数量的子组件,每个子组件代表一个单独的字段,我希望父组件的FormGroup可以验证子组件中包含的字段.只有这样做,我才会收到错误消息:
FormControlName必须具有一个对应的FormGroup.
这是我的父组件的模板代码:
<div class="form-group" [formGroup]="parentGroup">
<table>
<tbody>
<tr *ngFor="let i of array">
<child [property]="i" [options]="myForm.controls[i.id]"></child>
</tr>
</tbody>
</table>
</div>
表单在此处的组件文件中定义.我根据要添加的子组件数来添加FormControls:
private formAttrs: FormGroup;
constructor(private _fb: FormBuilder) { }
ngOnInit() {
this.myForm = this._fb.group({});
for (var i = 0; i < this.array.length; i++) {
this.formAttrs.addControl(this.array[i].id, new FormControl(this.array[i].value, Validators.required));
}
}
子组件的模板代码是这样的:
<td class="prompt">
{{i.label}}
</td>
<td class="required" width="1%">
<span *ngIf="property.required">*</span>
</td>
<td>
<input type="text " class="form-control" [ngClass]="{error: !options.valid}" formControlName="property.id">
</td>
<td>
虽然子组件类中没有定义任何内容(属性"和为选项"传递的FormControl元素除外),但我认为父组件中的formGroup可以与formControlName匹配在子组件中,但出现错误:
EXCEPTION: Error in ./ChildComponent class ChildComponent - inline
template:7:109 caused by: formControlName must be used with a parent
formGroup directive. You'll want to add a formGroup directive and pass
it an existing FormGroup instance (you can create one in your class).
有没有办法可以解决此错误?如果没有,有人可以建议解决此问题的另一种方法吗?
谢谢.
在Plunker中实现此功能时,我遇到了很多事情.
首先,我们需要将父级的FormGroup传递给子级,以便我们有一个FormGroup来满足模板引擎对FormControls的强制实施,该FormControls是FormGroup的一部分.
child.component.ts
@Input() parentGroup: FormGroup;
child.component.html
<td [formGroup]="parentGroup">
<...>
</td>
然后,我们还需要设置[formControl]
或评估property.id
,否则它将查找名称"property.id":
<input type="text " class="form-control" [ngClass]="{error: !options.valid}" [formControl]="options"/>
或
<input type="text " class="form-control" [ngClass]="{error: !options.valid}" formControlName="{{property.id}}"/>
您的代码使用绑定formGroup
的不同变量并使用formAttrs
,这对发生的情况不太清楚,因此我继续将它们折叠为一个,然后您可以在Plunker中看到它: http://plnkr.co/edit/3MRiO9bGNFAkN2HNN7wg?p=preview
I have an angular component corresponding a form/page that is generating an indeterminate amount of child components, each representing an individual field, and I would like the parent component's FormGroup to validate the fields contained in the child components. Only when I do so, I get an error:
A FormControlName must have a corresponding FormGroup.
Here is the template code for my parent component:
<div class="form-group" [formGroup]="parentGroup">
<table>
<tbody>
<tr *ngFor="let i of array">
<child [property]="i" [options]="myForm.controls[i.id]"></child>
</tr>
</tbody>
</table>
</div>
The form is defined in the component file here. I'm adding the FormControls according to how many child components we're adding:
private formAttrs: FormGroup;
constructor(private _fb: FormBuilder) { }
ngOnInit() {
this.myForm = this._fb.group({});
for (var i = 0; i < this.array.length; i++) {
this.formAttrs.addControl(this.array[i].id, new FormControl(this.array[i].value, Validators.required));
}
}
The template code for the child component is this:
<td class="prompt">
{{i.label}}
</td>
<td class="required" width="1%">
<span *ngIf="property.required">*</span>
</td>
<td>
<input type="text " class="form-control" [ngClass]="{error: !options.valid}" formControlName="property.id">
</td>
<td>
While there is nothing defined in the child component class (other than the "property" and the FormControl element passed down for "options"), I would think that the formGroup in the parent component would be able to match with the formControlName in the child component, but instead I get the error:
EXCEPTION: Error in ./ChildComponent class ChildComponent - inline
template:7:109 caused by: formControlName must be used with a parent
formGroup directive. You'll want to add a formGroup directive and pass
it an existing FormGroup instance (you can create one in your class).
Is there a way I can get around this error? If not, is there another solution to this problem that someone can suggest?
Thanks in advance.
There are a couple of things I came across implementing this in a Plunker.
First, we'll need to pass in our formGroup from the parent to the child so we have a FormGroup to satisfy the templating engine's enforcement of FormControls being a part of a FormGroup:
child.component.ts
@Input() parentGroup: FormGroup;
child.component.html
<td [formGroup]="parentGroup">
<...>
</td>
Then we'll also need to set the [formControl]
or evaluate property.id
, otherwise it looks for the name "property.id":
<input type="text " class="form-control" [ngClass]="{error: !options.valid}" [formControl]="options"/>
or
<input type="text " class="form-control" [ngClass]="{error: !options.valid}" formControlName="{{property.id}}"/>
Your code was using different variables binding the formGroup
and using formAttrs
which was a little unclear as to what was going on so I went ahead and collapsed them to one and you can see that in the Plunker: http://plnkr.co/edit/3MRiO9bGNFAkN2HNN7wg?p=preview
这篇关于angular2-在父FormGroup的子组件中验证FormControlName的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!