Angular 模型驱动表单嵌套组件父表单依赖答案

【问题标题】：Angular model driven form nested components parent form dependecyAngular 模型驱动表单嵌套组件父表单依赖
【发布时间】：2018-01-12 06:46:09
【问题描述】：

我一直致力于为具有许多嵌套组件的应用程序实现模型驱动表单。

这是我当前模板的 sn-p

<div [formGroup]="formGroup">
  <mycomponent1 [formParam]="getForm('myForm1')"></mycomponent1>
  <mycomponent2 [formParam]="getForm('myForm2')"></mycomponent1>
  <mycomponent3 [formParam]="getForm('myForm3')"></mycomponent1>
</div>

.ts 文件 sn-p

ngOnInit() {
 this.formGroup= this.fb.group({
   myForm1 = this.fb.group({...}),
   myForm2 = this.fb.group({...}),
   myForm3 = this.fb.group({...})
 });
}

getForm(formName: string) {
  return <FormGroup>this.formGroup.get(formName);
}

我的问题是：有没有人知道一些其他方法来实现模型驱动的表单到嵌套组件，而无需为子组件定义 @Input 表单组参数？

我的意思是，如何避免对每个嵌套组件都这样做？

@Input() formParam: FormGroup;

我为什么要问这个问题，因为我有更多嵌套组件，并且我不得不在其余嵌套组件中将表单组定义为 @Input，这是非常繁重的工作。

干杯。

【问题讨论】：

观看此视频：youtube.com/watch?v=CD_t3m2WMM8 Kara 涵盖了嵌套表单选项。
这主要取决于您要达到的目标。没有更好的方法来传递它，因为它应该以任何方式通过输入传递。但是嵌套组合可能负责创建组，而不是从父级接收它们。
@DeborahK 非常感谢，我刚刚发现了我忽略的概念，我会尝试它们并发布我的解决方案。干杯
也许：stackoverflow.com/questions/45696761/…?

标签： angular forms

【解决方案1】：

经过数小时的测试和研究，我终于找到了符合我要求的解决方案。这里是：

我从子组件中完全删除了每个@Input() form: FromGroup。
我的整个表单组树都是从父组件创建的。
我可以使用viewProvider 注入将单个表单组注入嵌套组件。

这是我的父模板

<div [formGroup]="form">
  <div [formGroup]="form.get('myForm1')"> <mycomponent1></mycomponent1> </div>
  <div [formGroup]="form.get('myForm2')"> <mycomponent2></mycomponent1> </div>
  <div [formGroup]="form.get('myForm3')"> <mycomponent3></mycomponent1> </div>
</div>

父模板.ts文件

ngOnInit() {
 this.formGroup= this.fb.group({
   myForm1 = this.fb.group({...}),
   myForm2 = this.fb.group({...}),
   myForm3 = this.fb.group({...})
 });
}

定义视图提供者的子组件

@Component({
  selector: 'mycomponent1',
  templateUrl: './mycomponent1.html',
  viewProviders: [
    {
      provide: ControlContainer,
      useExisting: FormGroupDirective
    }
  ]
})

这里是注入表单组指令的地方，这样我就可以访问从父组件创建的表单组，而无需使用@Input() form: FormGroup

export class MyComponent1 {
   constructor(public parent: FormGroupDirective) {}
}

在子模板中，我可以使用 parent.form 访问表单

<div>
  <input formControlName="childControl1"></input>
  <input formControlName="childControl2"></input>
  <button[disabled]="parent.form.invalid" >Submit</button>
</div>

【讨论】：