javascript - 具有验证功能的 Angular2 模板驱动的子表单组件

Question

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

我试图将重复的“子组”分离到它自己的子组件中，但我无法让父 ngForm 包含子组件中包含的验证。

这是我所说内容的简化版本:

父模板:

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

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

子模板:

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

我无法让父表单获取子输入的必需。我尝试让 child 在自己的表单中并将 #parentForm 实例传递给 child ，并让 child 调用:

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

但这仍然不起作用。

我也有 child 以相反的方式执行此操作，父级获取子表单的 ContentChildren 并将每个子表单添加到表单中，但验证仍然无效。

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

请帮我弄清楚为什么我不能向父级添加子表单并让它使用子级的验证。

Answer 1

一种可能的解决方案是从子组件到父表单添加控件，如下所示:

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