角度2形式分布在各个组件上

Question

我正在尝试创建一个表单组件,其中组件<form>为其及其后代提供表单内容,即控件.我正在使用带反应形式的RC4.该组件应该像这样使用:

<my-formwizard [form]="form">
  <input formControlName="name" type="text" />
</my-formwizard>

这是一个显示实现的插件:http://plnkr.co/edit/OSzjDQD63lwoEsyqdLvw？p = preview

我遇到异常:TypeError:无法读取null的属性'setParent'

有没有办法实现跨多个组件的反应形式？

---

更新:RC5有一个更清晰的错误消息,并且由于peeskillet的输入,formControlName如果自定义指令FormGroup通过formGroup属性获得附加,则可以使用它.更新后的plunk显示分布在两个组件上的表单:

http://plnkr.co/edit/1VfIH5AYjoe7dmizw6ss?p=preview

Answer 1

在你的Plunker,我不知道为什么你有 ngForm

<my-formwizard [form]="form" ngForm="form">

但那应该不存在.我认为甚至可能会创造一种全新的形式.应该删除.一旦你删除它,那么你将遇到另一个问题,说没有ControlContainer.的ControlContainer是FormGroupDirective([formGroup]).

这个问题是由formControlName.如果查看FormControlName指令的源代码,并查看构造函数,您将看到它需要ControlContainer依赖项.但不仅如此,它也有一个@Host^1层的装饰,这意味着它只能查找ControlContainer在主机注射器.

老实说,在这种情况下,我不太确定在这种情况下哪个喷射器用作主喷射器,但看起来它不是具有表格组指令的喷射器.也许是因为你如何设置组件.

我发现它不是使用的解决方案,而是使用formControlName,[formControl]只是传递一个FormControl实例.该FormControlDirective不会有这个问题(它需要一个ControlContainer),因为它有可能在独立使用.

所以你可以这样做

<input [formControl]="nameCtrl" type="text" />

export class App {

  form: FormGroup;
  nameCtrl: FormControl;

  constructor(fb: FormBuilder) {
    this.nameCtrl = new FormControl('');
    this.form = fb.group({
      name: this.nameCtrl
    });
  }
}

这解决了您的问题.这是更新的Plunker,

也可以看看:

• 如何解决使用大量自定义组件创建复杂表单的问题？对于一些设计思路.

_{1 - 请参阅主机和可见性...以获得有关此主题的详细信息}