angular2 - 在父 FormGroup 的子组件中验证 FormControlName [英] angular2 - validating FormControlName in child component of parent FormGroup

问题描述

我有一个与表单/页面相对应的角度组件，该表单/页面生成不确定数量的子组件，每个子组件代表一个单独的字段，我希望父组件的 FormGroup 验证子组件中包含的字段.只有当我这样做时，我才会收到错误:

<块引用>

FormControlName 必须有对应的 FormGroup.

这是我的父组件的模板代码:

<表格><tr *ngFor="让 i 个数组"><child [property]="i" [options]="myForm.controls[i.id]"></child></tr></tbody>

表单在此处的组件文件中定义.我根据我们添加的子组件的数量添加 FormControls:

private formAttrs: FormGroup;构造函数(私有_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));}}

子组件的模板代码是这样的:

{{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 匹配在子组件中，但我收到错误:

例外:./ChildComponent 类 ChildComponent 中的错误 - 内联模板:7:109 导致:formControlName 必须与父级一起使用formGroup 指令.您需要添加一个 formGroup 指令并通过它是一个现有的 FormGroup 实例(您可以在类中创建一个).

有什么办法可以解决这个错误?如果没有，有人可以建议解决此问题的另一种解决方案吗?

提前致谢.

解决方案

我在 Plunker 中遇到了一些事情.

首先，我们需要将我们的 formGroup 从父级传递给子级，以便我们有一个 FormGroup 来满足模板引擎强制执行 FormControls 作为 FormGroup 的一部分:

child.component.ts

@Input() parentGroup: FormGroup;

child.component.html

<...></td>

然后我们还需要设置[formControl] 或评估property.id，否则它会寻找名称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屋！