Question

尝试在另一个组件中添加组件时，表单构建器组中的错误为。

错误类型错误：无法读取属性＆＃39; group＆＃39;未定义的
无法阅读属性＆＃39;控件＆＃39;未定义的

我在plunker发布了我的完整代码供您参考，请帮我解决此问题，对不起，如果这是一个重复的问题

接口

export interface Customer {
    name: string;
    addressess: Address[];

}

export interface Address {
    street: string;
    postcode: string;

}

export interface ExtraFields {
  DOB:string;
  Designation:string;
         otherfields: ExtraFields[];
}

组元

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

模板

<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>

Answer 1

AddressComponent中的几个问题是导致上述错误的原因：

_fb变量未注入
不导入FormBuilder和Validator
addressForm模型配置不正确

基本上，一旦导入了所需的类型

import { FormGroup, FormBuilder, Validators } from '@angular/forms';

注入FormBuilder

constructor(private _fb: FormBuilder){}

并正确定义FormGroup

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

一切都会好起来的。

检查修改过的plunkr：

http://plnkr.co/edit/wjj6FGFK1esqRQh5oEGY?p=preview

Angular 2无法在组件中添加嵌套组件

1 个答案: