javascript - 单击 Angular 4 中的按钮时动态添加输入

Question

我将创建一个可以动态添加输入的表单
我找到了question关于 Angular 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。您仅使用数组来初始化简单的 FormControls，而不是 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 指令的更多信息 here