Question

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

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

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

我遇到异常：TypeError：无法读取属性＆＃39; setParent＆＃39;为null

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

更新：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 directive的源代码，并查看构造函数，您将看到它需要ControlContainer依赖项。但不仅如此，它还有@Host ¹装饰器，这意味着它只会在主机注入器中查找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，

另见：

How to tackle creating complex form with lots of custom components?了解一些设计理念。

_{1 - 有关此主题的详细阅读，请参阅Host and Visibility...}

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

1 个答案: