具有输入字段的动态 FormArray 已阻止输入答案

【问题标题】：Dynamic FormArray with input fields has input blocked具有输入字段的动态 FormArray 已阻止输入
【发布时间】：2020-11-27 16:55:16
【问题描述】：

我正在尝试结合 bootstrap 在 angular6 中动态创建 FormArray。

我的 HTML：

<form [formGroup]="form" (ngSubmit)="submit()">
    <mat-dialog-content>
        <div id="arrayDisplay">
            <button mat-button id="dialog-addEntry-button" class="btn blue"  type="button" (click)="addItem()">
                Add new entry
            </button>
            <div formArrayName="fooBar" *ngFor="let item of form.controls.fooBar?.value; let i = index;">
                <div [formGroupName]="i">
                    <input formControlName="foo" required  placeholder="foo">
                    <input formControlName="bar" required  placeholder="bar">
                </div>
            </div>
        </div>
    </mat-dialog-content>
    <mat-dialog-actions>
        <button mat-button id="dialog-submit-button" class="btn blue" type="submit" 
                [disabled]="form.invalid || form.pending || form.pristine">
            Accept
        </button>
        <button mat-button id="dialog-cancel-button" class="btn grey-salsa btn-outline" type="button" mat-dialog-close>
            Cancel
        </button>
    </mat-dialog-actions>
</form>

我的打字稿如下：

import { Observable, throwError } from 'rxjs';
import { Component, OnInit, Inject } from '@angular/core';
import { FormBuilder, Validators, FormGroup, FormArray} from '@angular/forms';
import { catchError } from 'rxjs/operators';
import { HttpEvent, HttpEventType } from '@angular/common/http';

export class ShzizzleNizzle implements OnInit{

    public form: FormGroup;

    constructor(private fb: FormBuilder)
    {

    }

    createItem(): FormGroup {
        return this.fb.group({
            foo: 'test',
            bar: ''
        });
    }

    addItem(): void {
        const myShizzle = this.form.controls.fooBar as FormArray
        myShizzle.push(this.createItem());
    }


    submit(): void {
        alert(JSON.stringify(this.form.controls.transactionData.value));
    }

    ngOnInit() {
        this.form = this.fb.group({
        fooBar: this.fb.array([])});
    }
}

当我执行此代码时，我可以向数组中添加条目，但我无法在字段 foo 和 bar 中输入值。我究竟做错了什么？还是其他地方的问题？比如 webpack 构建。

我使用这些链接作为创建此表单的指南： tektutorials stackblitz netbasal

编辑：如果我重命名 formArrayName，我可以输入值，但它们不需要验证

【问题讨论】：

如果没有提琴手很难看到，但是 HTML 中的每个项目都有相同的名称和 formControlName 看起来有点不对劲。您的做法似乎与 tektutorials 上的示例有所不同。给它们起唯一的名字不是更好吗？
我尝试删除这些，但没有成功。我认为这是一个表单命名问题。

标签： typescript angular6 formarray

【解决方案1】：

我设法通过将数组 HTML 更改为：

<div formArrayName="fooBar" *ngFor="let item of getFooBar().controls; let i = index;">
    <div [formGroupName]="i">
        <input formControlName="foo" required  placeholder="foo">
        <input formControlName="bar" required  placeholder="bar">
    </div>
</div>

并将此功能添加到打字稿

getFooBar(): FormArray {
    return this.form.get("fooBar") as FormArray
}

【讨论】：