Dynami c FormArray с полями ввода заблокировал ввод - PullRequest
Новая
       139

Dynami c FormArray с полями ввода заблокировал ввод

0 голосов
/ 07 августа 2020

Я пытаюсь динамически создать FormArray в angular6 в сочетании с bootstrap.

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

Мой Typescript выглядит следующим образом: 

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, я могу вводить значения, но они не требуют проверки

1 Ответ

0 голосов
/ 07 августа 2020

Мне удалось заставить его работать, изменив массив 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
}
...