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

发布时间：2020-12-17 07:27:30 所属栏目：安全来源：网络整理

导读：我正在尝试创建一个表单组件,其中组件提供 form及其后代的形式内容,即控制.我正在使用带反应形式的RC4.组件应该像这样使用： my-formwizard [form]="form" input formControlName="name" type="text" //my-formwizard 这是一个显示实现的插件：http://plnkr.

我正在尝试创建一个表单组件,其中组件提供< 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的输入,如果自定义指令获取通过formGroup属性附加的FormGroup,则可以使用formControlName.更新的plunk显示了分布在两个组件上的表单：

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

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

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

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

问题是由formControlName引起的.如果查看FormControlName directive的源代码,并查看构造函数,您将看到它需要ControlContainer依赖项.但不仅如此,它还有一个@ Host1装饰器,这意味着它只会在主机注入器中查找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…

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!