Angular2模板驱动的带有验证的子表单组件 [英] Angular2 template driven sub form component with validation

问题描述

我有一个模板驱动的表单，其中包含 ngFor 中的一组输入。

我是试图分离重复成它自己的子组件的'子组'，但是我有麻烦让父 ngForm 包含子组件中包含的验证。

以下是我正在讨论的简化版本：

父模板：

 < form＃parentForm =ngForm> 
< input name =firstName需要ngModel> 
< input name =lastName需要ngModel> 
 
 < / form> 
  

子模板：

 < div> 
< input name =foorequired ngModel> 
< input name =barrequired ngModel> 
< / div> 
  

我无法在所需的的子输入。我尝试让孩子在自己的表单中，并将 #parentForm 实例传递给子代，并让子代调用：

this.parentForm.addFormGroup（this.childForm.form）

但这仍然没有工作。

我也有孩子以相反的方式做父母得到子窗体的 ContentChildren 和

我知道我可以让子组件实现 ControlValueAccessor 然后我需要实现一个自定义的验证器，我宁愿不这样做，因为没有一个验证实际上是新的，它只是 required 的。

请帮我弄清楚为什么我无法向父母添加子表单并让它使用孩子的验证。

解决方案

一种可能的解决方案可能是从子组件到父表格如下：

child.component.ts

  @Component（{
 selector：'child-component'，
 template：`
< div> 
< input name =foorequired ngModel> 
< input name =barrequired ngModel> 
< / div> 
`
}）
 export class ChildComponent {
 @ViewChildren（NgModel）controls：QueryList< NgModel> ;; 
 
构造函数（private parentForm：NgForm）{} 
 
 ngAfterViewInit（）{
 this.controls.forEach（（control：NgModel）=> {
 this.parentForm.addControl（control）; 
}）; 
} 
} 
  

Plunker Example

I have a template driven form which contains a group of inputs contained within an ngFor.

I am trying to separate the 'sub group' which repeats into its own child component, but I am having trouble having the parent ngForm include the validation included within the child component.

Here is a simplified version of what I am talking about:

Parent template:

<form #parentForm="ngForm">
    <input name="firstName" ngModel required>
    <input name="lastName" ngModel required>

    <child-component *ngFor="let child of children;"></child-component>
</form>

Child template:

<div>
    <input name="foo" required ngModel>
    <input name="bar" required ngModel>
</div>

I am not able to have the parent form pick up on the required's of the child inputs. I tried having the child within its own form and passing the #parentForm instance through to the child, and having the child call:

this.parentForm.addFormGroup(this.childForm.form)

but this still doesn't work.

I have also child doing this the reverse way where the parent gets the ContentChildren of the sub forms and adds each one to the form, but still the validation doesn't work.

I know I could have the subcomponent implement ControlValueAccessor but then I would need to implement a custom validator which I'd rather not do since none of the validation is actually new, it's just required's.

Please help me figure out why I can't add a sub-form to the parent and have it use the child's validations.

解决方案

One possible solution might be addition controls from child component to parent form as follows:

child.component.ts

@Component({
  selector: 'child-component',
  template: `
   <div>
    <input name="foo" required ngModel>
    <input name="bar" required ngModel>
  </div>
  `
})
export class ChildComponent {
  @ViewChildren(NgModel) controls: QueryList<NgModel>;

  constructor(private parentForm: NgForm) { }

  ngAfterViewInit() {
    this.controls.forEach((control: NgModel) => {
      this.parentForm.addControl(control);
    });
  }
}

Plunker Example

这篇关于Angular2模板驱动的带有验证的子表单组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！