新しく追加されたネストされたコンポーネントのJson表現が表示されない

Question

新しいコンポーネントの中にネストされたコンポーネントを作成しています。あなたはをクリックした場合、動的にここに

は、追加ボタンがあるだろうという内部でそのクリック時に、それはDOBと指定を追加することは、2つのフィールド通りと郵便番号を追加します+リンク別のアドレスを追加し、plunkerリンクありフィールドに値を入力すると、下に表示されません。

テンプレート

<div [formGroup]="adressForm"> 
    <div class="form-group col-xs-6"> 
     <label>street</label> 
     <input type="text" class="form-control" formControlName="street"> 
     <small [hidden]="adressForm.controls.street.valid" class="text-danger"> 
      Street is required 
     </small> 
    </div> 
    <div class="form-group col-xs-6"> 
     <label>postcode</label> 
     <input type="text" class="form-control" formControlName="postcode"> 
    </div> 
     <div class="margin-20"> 
      <a (click)="addextraField()" style="cursor: default"> 
      Add + 
      </a> 
     </div> 

      <div formArrayName="extraspaces"> 
      <div *ngFor="let ext of adressForm.controls.extraspaces.controls; let i=index" class="panel panel-default"> 
      <div class="panel-heading"> 
       <span>Address {{i + 1}}</span> 
       <span class="glyphicon glyphicon-remove pull-right" *ngIf="adressForm.controls.extraspaces.controls.length > 1" (click)="removeAddress(i)"></span> 
      </div> 
      <div class="panel-body" [formGroupName]="i"> 
       <extrafield [extragroup]="adressForm.controls.extraspaces.controls[i]"></extrafield> 
      </div> 
      </div> 
     </div> 

</div> 

コンポーネント

import { Component, Input } from '@angular/core'; 
import { FormGroup } from '@angular/forms'; 
import { Injectable } from '@angular/core'; 
@Component({ 
    moduleId: module.id, 
    selector: 'address', 
    templateUrl: 'address.component.html', 
}) 
export class AddressComponent { 
    @Input('group') 
    public adressForm: FormGroup; 
    private _fb: FormBuilder 
    constructor(){} 


    ngOnInit() { 
     this.adressForm = this._fb.group({ 
      extraspaces: this._fb.array([]) 
     }); 

     // add address 
     this.addextraField(); 

     /* subscribe to addresses value changes */ 
     // this.myForm.controls['addresses'].valueChanges.subscribe(x => { 
     // console.log(x); 
     // }) 
    } 


    initextraField() { 
     return this._fb.group({ 
      dob: ['', Validators.required], 
      designation: ['', Validators.required] 
     }); 
    } 

    addextraField() { 
     const control = <FormArray>this.adressForm.controls['extraspaces']; 
     const addrCtrl = this.initextraField(); 

     control.push(addrCtrl); 
    } 

    // removeAddress(i: number) { 
    //  const control = <FormArray>this.myForm.controls['addresses']; 
    //  control.removeAt(i); 
    // } 
} 

これがあれば、あなたが覚えておく必要が重複して1つの

Answer 1

唯一のことは、常に完全なを構築することです申し訳ありませんが、私はこの問題を解決するために助けてくださいあなたの場合のような孫がいるかどうかにかかわらず、親のフォーム。このようにして、親はフォーム全体とフォームに加えた変更を認識します。だから実際には本当に簡単な解決策があります。親がこのformgroupを認識しませんから、あなたのAddressComponentのOnInitに次のように削除します。

this.adressForm = this._fb.group({ 
    street: [''], 
    postcode: [''], 
    extraspaces: this._fb.array([]) 
}); 

それは実際にはない、このコードからstreetとpostcodeを認識することになると思われる理由、それはこれら二つを認識親関数initAddressに設定しているためです。したがって、だけではなく、その機能にextraspaces: this._fb.array([])を追加します。

ここ

initAddress() { 
    return this._fb.group({ 
     street: ['', Validators.required], 
     postcode: [''], 
     extraspaces: this._fb.array([]) 
    }); 
} 

があなたのフォークさPLUNKER

編集：私はあなたがおそらくまた、最も内側のformgroupの1を初期化したい参照

それでは、関数を以下のように呼び出すことができます：

extraspaces: this._fb.array([this.initextraField()]) 

AddressComponentで使用している親と同じ機能（追加）を使用するか、そのformArray内に空のフォームグループを手動で設定します。