我已经把一个非常简单的角形表单放在一起,当用户点击它时,一个按钮可以动态添加文本字段。我遗漏了一些东西,因为当我点击“添加”按钮时,它不会动态添加一个新的文本框。有人能告诉我我错过了什么吗,
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 { }发布于 2019-02-07 17:50:58
我做了一个Stackblitz来解决你的问题:Stackblitz
在视图中,我只是用let feedback of feedbackForm.get('goodFeedback').controls替换了let goodfeedback of goodfeedback.controls这一行。
我认为当您在表单的controls数组中添加一个控件时,Angular没有看到数组发生了变化,所以当您使用let goodfeedback of goodfeedback.controls遍历控件时,它会看到controls是空的。
https://stackoverflow.com/questions/54569275
复制相似问题