對於新添加的嵌套組件不顯示Json表示

在另一個組件內創建嵌套組件，其中雙向綁定新添加的字段的值在視圖中使用JSON管道時，無法在添加值時獲取值動態對於新添加的嵌套組件不顯示Json表示

這裏是plunker鏈接，如果點擊添加另一個地址+鏈接將添加兩個字段街道和郵編，裏面會有一個附加鍵，點擊它會增加出生日期及名稱字段，如果您鍵入任何值，它將不會顯示在下面的JSON視圖中

模板

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

請幫我解決這個問題，對不起，如果這是一個複製一個

來源

2017-05-24 M Balajivaishnav

唯一你需要記住的是要始終構建完整的東西不管你的情況是否有孫子，這樣父母就會知道整個表單以及對錶單所做的更改。所以實際上有一個非常簡單的解決方案。刪除您的OnInit AddressComponent下，因爲父母會不知道這個formgroup的：爲什麼它似乎將承認street和postcode從這段代碼，其實它不，它承認這兩個

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

，因爲您已將它們設置在父功能initAddress中。因此，因此，只需在函數中添加extraspaces: this._fb.array([])來代替：

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

這裏是你的分叉PLUNKER

編輯：

我看，你或許需要也初始化最裏面formgroup之一，那麼你可以，那麼你可以這樣調用函數：

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

並在父級使用相同的函數（添加它）在AddressComponent中使用，或者然後在該formArray內手動設置一個空的表單組。

來源

2017-05-24 16:55:25 Alex

對於新添加的嵌套組件不顯示Json表示

回答

相關問題