Угловая форма не может динамически добавлять текстовое поле при нажатии кнопки Добавить - PullRequest
Новая
       40

Угловая форма не может динамически добавлять текстовое поле при нажатии кнопки Добавить

0 голосов
/ 07 февраля 2019

Я собрал очень простую угловую форму, в которой одна кнопка предполагает динамическое добавление текстовых полей, когда пользователь нажимает на нее.Я что-то упустил, потому что, когда я нажимаю кнопку «Добавить», он не добавляет новое текстовое поле динамически.Может кто-нибудь сказать мне, что мне не хватает,

app-component.ts` 

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl, FormArray, Validators } from '@angular/forms';
import { FormBuilder } from '@angular/forms';


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {

  feedbackForm: FormGroup;
  constructor(private fb: FormBuilder) { }

  ngOnInit() {
    this.feedbackForm = this.fb.group({
      goodFeedback: this.fb.array([])
    });
  }

  get goodFeedback() {
    return this.feedbackForm.get('goodFeedback') as FormArray;
  }

  addGoodFeedback() {
    this.goodFeedback.push(this.fb.control(''));
  }
}

app-component.html 

<div class="container-fluid">
  <h2>Add Feedback</h2>

  <form [formGroup]="feedbackForm">
    <div class="form-group">
      <label>Good Feedback</label>
      <button type="button" class="btn btn-secondary btn-sm m-2" (click)="addGoodFeedback()">Add</button>
      <input type="text" formControlName="goodfeedback" class="form-control">

      <div formArrayName="goodfeedback" *ngFor="let goodfeedback of goodfeedback.controls; let i=index">
        <input type="text" class="form-control my-1" [formControlName]="i">
      </div>
    </div>
  </form>
</div>

app.module.ts 

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { ReactiveFormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    ReactiveFormsModule,
    HttpClientModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

1 Ответ

0 голосов
/ 07 февраля 2019

Я сделал Stackblitz, который решает вашу проблему: Stackblitz

По-моему, я просто заменил эту строку let goodfeedback of goodfeedback.controls на let feedback of feedbackForm.get('goodFeedback').controls.

Я думаючто когда вы добавляете элемент управления в массив controls формы, Angular не видит, что массив изменился, поэтому, когда вы перебираете элементы управления с помощью let goodfeedback of goodfeedback.controls, он видит, что controls пуст.

...