2016-11-30 27 views
6

Ben angular2 için oldukça yeni ve son birkaç gündür manken sürülen formlarıYeniden bileşenleri

kullanarak yeniden kullanılabilir formu bileşenlerini oluşturmak için uğraşıyorlar

Yani bir bileşeni var diyelim 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]], 
     }); 
    } 
} 

Ve bileşen 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]] 
     }); 
    } 
} 

sorum ca nasıl n Girişlerin kontrolünü ana bileşene taşımadan bu iki alt bileşeni kullanarak bir form oluşturuyorum. Örneğin bu fikrin arkasında bir 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 
     }); 
    } 
} 

kavramı kendi yapı taşlarından bazılarını paylaşmak birçok karmaşık formları oluşturmaktır. olduğu

, ben [valueB, valueA1, valueA2] benim Main bileşen formControlNames isimlerini bilmek istiyorum ama automagicallylar bunları eklemek ve güncelleme/üst düzey formu grubuna doğrulamaz.

Doğru yöne doğru herhangi bir fikir veya nokta yardımcı olabilir.

cevap

8

Bu çocuk bileşenine bizim üst düzey FormGroup geçen ve çocuk bileşeni alt düzeyleri hakkında esasen hiçbir şey bilmek de o tarafa FormGroup ihtiyaçlarını üst seviyede formGroupName kullanarak daha yüksek bir seviyeye FormGroup kendisini eklemek suretiyle başarmak olabilir:

main.component.ts

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

artık kullanılan olduğu gibi Ayrıca, Forma kurtulmak formB beyanlar alacak.

bileşen a.component.ts[formGroup]formGroupName biz büyük bir bütün içinde çalışmak için bir grup olarak bileşenin kontrollerini belirlemek ve ekler nasıl bizim üst grup olan (yapacaklar üst grubun iç içe).

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

İşte plunker var (Ben yapılabilir eğer sadece görmek için buraya biraz daha dinamik B bileşeni yapılan unutmayın, ancak yukarıda uygulama B'ye eşit derecede geçerlidir): http://plnkr.co/edit/fYP10D45pCqiCDPnZm0u?p=preview

+0

Teşekkür çok, bu gerçekten yararlı ve göz açılış oldu :) – stevengatsios

+0

Yeni açısal ve model odaklı formları hemen ile başladı. Merak etme, bu metodu paylaşma * FormGroup * alanları önerilen yaklaşım mı yoksa bir çözüm mü? Karmaşık bir sistem yapıyorum ve küçük bileşenler geliştirmeye odaklanmaya ve onları ebeveyn-çocuk ilişkisine (4-5 seviyeleri) yeniden kullanmaya çalışıyorum. – Raf

İlgili konular