角度模型驱动形式嵌套组件父表单依赖

时间:2018-01-11 01:05:20

标签: angular forms

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

这是我当前模板的片段

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

.ts文件片段

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,这是非常繁重的工作。

干杯。

1 个答案:

答案 0 :(得分:0)

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

  1. 我完全删除了子组件中的每个@Input() form: FromGroup

  2. 我的整个表单组树都是从父组件创建的。

  3. 我可以使用viewProvider注入将单个表单组注入嵌套组件。

  4. 这是我的父模板

    <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>