重用组件

Question

我是相当新的angular2而且在过去的几天我一直在试图使用模型驱动形式

创建可重用表单组件

因此，可以说，我们有一个组件componentA.component.ts

@Component({ 
    selector: 'common-a', 
    template: ` 
    <div [formGroup]="_metadataIdentifier"> 
     <div class="form-group"> 
     <label>Common A[1]</label> 
     <div> 
      <input type="text" formControlName="valueA1"> 
      <small>Description 1</small> 
     </div> 
     <div class="form-group"> 
     <label>Common A[2]</label> 
     <div> 
      <input type="text" formControlName="valueA2"> 
      <small>Description 2</small> 
     </div> 
    </div> 
    ` 
}) 


export class ComponentA implements OnInit{ 

    @Input('group') 
    public myForm: FormGroup; 

    constructor(private _fb: FormBuilder) { 
    } 

    ngOnInit() { 
     this.myForm = this._fb.group({ 
      valueA1 : ['', [Validators.required]], 
      valueA2 : ['', [Validators.required]], 
     }); 
    } 
} 

成分b componentB.component.ts

@Component({ 
    selector: 'common-b', 
    template: ` 
    <div [formGroup]="_metadataIdentifier"> 
     <div class="form-group"> 
     <label>Common B</label> 
     <div> 
      <input type="text" formControlName="valueB"> 
      <small>Description</small> 
     </div> 
    </div> 
    ` 
}) 


export class ComponentB implements OnInit{ 

    @Input('group') 
    public myForm: FormGroup; 

    constructor(private _fb: FormBuilder) { 
    } 

    ngOnInit() { 
     this.myForm= this._fb.group({ 
      valueB : ['', [Validators.required]] 
     }); 
    } 
} 

我的问题是如何通过CA n我使用这两个子组件构成一个表单，而不会将输入控件移动到主要组件。 例如一个main.component.ts

@Component({ 
    selector: 'main', 
    template: ` 
    <form [formGroup]="myForm" (ngSubmit)="onSubmit(myForm.value)"> 
     <div> 
      <common-a [group]="formA"></common-a> 
      <common-b [group]="formB"></common-b> 
      <div> 
       <button>Register!</button> 
      </div> 
     </div> 
    </form> 
    ` 
}) 


export class Main implements OnInit{ 

    @Input('group') 
    public myForm: FormGroup; 

    public formA : FormGroup; 

    public formB : FormGroup; 

    constructor(private _fb: FormBuilder) { 
    } 

    ngOnInit() { 
     this.myForm = this._fb.group({ 
      //how can I compose these two sub forms here 
      //leaving the form control names agnostic to this component 
     }); 
    } 
} 

这背后的想法的概念是建立一个分享他们的一些积木的许多复杂的形式。

也就是说，我不希望我的Main组件知道的formControlNames名称[valueA1，valueA2，valueB]，但自动将它们插入，并在顶层表单组更新/验证。

任何想法或指向正确的方向将是有益的。

Answer 1

这可以通过在我们的顶级FormGroup传递到子组件和具有子组件自身添加到使用formGroupName这样上层FormGroup需要知道基本一无所知较低级别的较高水平FormGroup做到：

main.component.ts

template: `<...> 
    <common-a [parentForm]="myForm"></common-a> 
    <...> 

我们也将摆脱形式上的，formB声明，因为它们不再使用。

组件a.component.ts[formGroup]是我们的父组，formGroupName是我们将如何识别和连接组件的控制作为一个群体在更大的整体工作（他们会在父组内嵌套）。

@Component({<...> 
template: ` 
<div [formGroup]="parentForm"> 
    <div class="form-group"> 
    <label>Common A[1]</label> 
    <div formGroupName="componentAForm"> 
     <input type="text" formControlName="valueA1"> 
     <small>Description 1</small> 
    </div> 
    <div class="form-group"> 
    <label>Common A[2]</label> 
    <div formGroupName="componentAForm"> 
     <input type="text" formControlName="valueA2"> 
     <small>Description 2</small> 
    </div> 
</div>` 
}) 

export class ComponentA implements OnInit { 
    @Input() parentForm: FormGroup; 
    componentAForm: FormGroup; 

    constructor(private _fb: FormBuilder) {} 

    ngOnInit() { 
     this.componentAForm = this._fb.group({ 
      valueA1: ['', Validators.required], 
      valueA2: ['', Validators.required] 
     }); 

     this.parentForm.addControl("componentAForm", this.componentAForm); 
    } 
} 

这里有一个plunker （请注意，我做了B组份多了几分动感这里只是为了看它是否可以做，但上面的实施同样适用于B）：http://plnkr.co/edit/fYP10D45pCqiCDPnZm0u?p=preview