对于新添加的嵌套组件不显示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表示

回答

相关问题