Angular 未显示新添加的嵌套组件的Json表示

我在另一个组件中创建嵌套组件，在视图中使用JSON管道双向绑定新添加字段的值，在动态添加时无法获取这些值

这是一个链接，如果你点击Add-other address+link，它将添加两个字段street和postcode，其中将有一个Add按钮，点击它将添加DOB和Designation字段，如果你输入任何值，它将不会显示在下面的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>

街道
街道是必需的
邮政编码
加+
地址{i+1}

组件

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

从'@angular/core'导入{Component，Input}；
从'@angular/forms'导入{FormGroup}；
从“@angular/core”导入{Injectable}；
@组成部分({
moduleId:module.id，
选择器：'地址'，
templateUrl:'address.component.html'，
})
导出类地址组件{
@输入（'组'）
公共地址形式：FormGroup；
私人(fb):FormBuilder
构造函数（）{}
恩戈尼尼特（）{
this.addressform=this.\u fb.group({
外部空间：this.\u fb.array（[]）
});
//添加地址
这个.addextraField（）；
/*订阅地址值更改*/
//this.myForm.controls['addresses'].valueChanges.subscribe（x=>{
//控制台日志（x）；
// })
}
initextraField（）{
将此返回。\u fb.group({
dob:[''，需要验证人]，
名称：[''，验证器。必填]
});
}
addextraField（）{
const control=this.addressform.controls['extraspaces']；
const addrCtrl=this.initextraField（）；
控制按钮（addrCtrl）；
}
//removeAddress（i:编号）{
//const control=this.myForm.controls['addresses']；
//控制。移除（i）；
// }
}

---

请帮助我解决此问题，如果这是一个重复的问题，很抱歉。您需要记住的唯一一件事是始终在父级中构建完整的表单，无论您的案例中是否有孙子。这样，家长就可以了解整个表单以及您对表单所做的更改。所以实际上有一个非常简单的解决方案。在您的

AddressComponent

OnInit中删除以下内容，因为父级不会知道此formgroup：

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

为什么它似乎会从这个代码中识别出

街道

和

邮政编码

，实际上它不会，它会识别这两个，因为您已经在父函数

initAddress

中设置了它们。因此，只需在该函数中添加

extraspaces:this.\u fb.array（[]）

：

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

这是你的叉子

编辑：

我知道你可能也想初始化最里面的一个formgroup，然后你可以，然后你可以像这样调用里面的函数：

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

并在父级中使用与在

AddressComponent

中相同的函数（添加它），或者在该formArray中手动设置一个空表单组