时间戳

首页 > 解决方案 > 具有输入字段的动态 FormArray 已阻止输入

typescript - 具有输入字段的动态 FormArray 已阻止输入

问题描述

我正在尝试结合引导程序在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，我可以输入值，但它们不需要验证

标签： typescriptangular6formarray

解决方案

我设法通过将数组 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
}

推荐阅读