Question

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

这里是plunker链接，如果你点击添加另一个地址+ 链接，它会添加两个字段street和postcode，里面会有一个添加按钮，点击它将添加DOB和指定字段，如果您键入任何值，它将不会显示在下面的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);
    // }
}

请帮我解决这个问题，对不起，如果这是一个重复的

Answer 1

您唯一需要记住的是始终在父母中构建完整的表单，无论您的情况是否有像孙子一样。通过这种方式，父级可以了解整个表单以及您对表单所做的更改。所以实际上有一个非常简单的解决方案。删除AddressComponent OnInit中的以下内容，因为父级将不会知道此表单组：

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

为什么看起来它会识别此代码中的street和postcode，实际上它不会识别这两个，因为您已将它们设置在父函数{{1 }}。因此，只需在该函数中添加initAddress：

extraspaces: this._fb.array([])

这是您的分叉 PLUNKER

修改

我看到你也许想初始化一个最里面的formgroup，那么你可以，那么你可以像这样调用函数内部：

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

并在extraspaces: this._fb.array([this.initextraField()])中使用相同的函数（添加它），或者在formArray中手动设置一个空的表单组。

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

1 个答案: