thành phần tái sử dụng trong các hình thức mô hình điều khiển angular2

Question

Tôi khá mới để angular2 và trong vài ngày qua, tôi đã cố gắng để tạo ra các thành phần hình thức tái sử dụng sử dụng mô hình điều khiển hình thức

Vì vậy, cho phép nói rằng chúng ta có một thành phần 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]], 
     }); 
    } 
} 

Và một thành phần 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]] 
     }); 
    } 
} 

câu hỏi của tôi là như thế nào ca n Tôi soạn một biểu mẫu sử dụng hai thành phần phụ này mà không cần di chuyển sự kiểm soát của các đầu vào đến thành phần chính. Ví dụ một 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 
     }); 
    } 
} 

Khái niệm đằng sau ý tưởng này là để xây dựng nhiều hình thức phức tạp mà chia sẻ một số khối xây dựng của họ.

Đó là, tôi không muốn thành phần Main tôi biết tên của các formControlNames [valueA1, valueA2, valueB] nhưng Automagically chèn chúng và cập nhật/xác nhận vào nhóm hình thức cấp cao nhất.

Bất kỳ ý tưởng hoặc điểm nào để đi đúng hướng sẽ hữu ích.

Answer 1

Điều này có thể thực hiện bằng cách thông qua trong cấp cao nhất của chúng tôi FormGroup với thành phần trẻ và có phần trẻ thêm tự vào mức độ cao hơn FormGroup sử dụng formGroupName cách mà cấp trên FormGroup cần phải biết về cơ bản không có gì về các cấp thấp hơn:

main.component.ts

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

Chúng tôi cũng sẽ thoát khỏi forma, tờ khai formB như họ không còn sử dụng.

thành phần a.component.ts[formGroup] là tập đoàn mẹ của chúng tôi, formGroupName là cách chúng ta sẽ xác định và đính kèm các điều khiển của thành phần như một nhóm để làm việc trong toàn bộ lớn hơn (tổ bên trong nhóm phụ huynh họ sẽ).

@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); 
    } 
} 

Dưới đây là một plunker (lưu ý rằng tôi đã thực hiện thành phần B một chút năng động hơn đây chỉ để xem nếu nó có thể được thực hiện, nhưng việc thực hiện trên cho cũng không kém phần áp dụng đối với B): http://plnkr.co/edit/fYP10D45pCqiCDPnZm0u?p=preview