पुन: उपयोग घटकों

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]], 
     }); 
    } 
} 

और एक घटक बी 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]] 
     }); 
    } 
} 

मेरा प्रश्न कैसे है सीए 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, valueA2valueB,] लेकिन स्वतः उन्हें डालने और अद्यतन/शीर्ष स्तर प्रपत्र समूह पर मान्य।

सही दिशा में कोई भी विचार या अंक उपयोगी होगा।

Answer 1

यह बच्चा घटक के लिए हमारे शीर्ष स्तर FormGroup में गुजर और बच्चे घटक उच्च स्तर FormGroupformGroupName ऊपरी स्तर FormGroup जरूरतों का उपयोग कर कि जिस तरह से अनिवार्य रूप से निचले स्तर के बारे में कुछ भी नहीं पता करने के लिए में खुद को जोड़ने के होने से पूरा किया जा सकता है:

main.component.ts

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

हम भी forma से छुटकारा 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 है (ध्यान दें कि मैं सिर्फ देखने के लिए कि यह किया जा सकता है एक छोटे से अधिक गतिशील यहाँ बी घटक बना है, लेकिन के लिए ऊपर कार्यान्वयन बी को समान रूप से लागू होता है): http://plnkr.co/edit/fYP10D45pCqiCDPnZm0u?p=preview