单击角度4中的按钮时动态添加输入

Question

我将创建一个可以动态添加输入的表单
我发现了一个问题，关于角2同样的问题，但我不能让它在我的工作为例

这是我的ts文件：

export class AjoutProjetComponent implements OnInit {
    isLinear = false;
    firstFormGroup: FormGroup;
    secondFormGroup: FormGroup;

    constructor(private _formBuilder: FormBuilder) {}

    ngOnInit() {
        this.secondFormGroup = this._formBuilder.group({
            pers: [this._formBuilder.array([this.createItem()])]
        });
    }
    createItem(): FormGroup {
        return this._formBuilder.group({
            name: ['', Validators.required]
            poste: ['', Validators.required],

        });
    }
    addItem(): void {
        const control = < FormArray > this.secondFormGroup.controls['pers'];
        control.push(this.createItem());
    }

}

然后是HTML文件

<mat-step [stepControl]="secondFormGroup">
    <form [formGroup]="secondFormGroup">
        <ng-template matStepLabel>Constituez votre équipe</ng-template>
        <div formArrayName="pers">
            <mat-form-field *ngFor="let control of secondFormGroup.controls.pers.controls; let i= index">
                <input matInput placeholder="Nom collaborateur" formControlName="name" required>
            </mat-form-field>

        </div>
    </form>
</mat-step>
        <div>{{secondFormGroup.value | json}}</div>

当我单击我最喜欢的图标时，出现此错误：

ERROR TypeError: control.push is not a function at AjoutProjetComponent.addItem

如何使添加动态输入有效？

更新我已经更新了我的html代码，以便可以打印两个输入，但是当我运行我的代码时，现在出现此错误

ERROR Error: Cannot find control with path: 'pers -> name'

Answer 1

您没有正确声明FormArray 。 您仅使用数组来初始化简单的FormControl，而不初始化FormGroups或FormControls ，请更改为：

this.secondFormGroup = this._formBuilder.group({
        pers: this._formBuilder.array([this.createItem()]) // remove opening and closing brackets
    });

要查看动态添加到html的输入，您需要使用ngFor循环。 我认为您有点误解了formArrayName的用法，该用法仅向模板添加上下文以与FormArrays一起使用。 尝试这个：

<ng-container formArrayName="pers">
  <input placeholder="Address"  
    *ngFor="let control of secondFormGroup.controls.pers.controls"
    [formControl]="control.controls.name" required />
</ng-container>

在这里阅读更多关于FormArrayName指令的信息