首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >单击添加按钮时,Angular form无法动态添加文本框

单击添加按钮时,Angular form无法动态添加文本框
EN

Stack Overflow用户
提问于 2019-02-07 16:38:39
回答 1查看 744关注 0票数 1

我已经把一个非常简单的角形表单放在一起,当用户点击它时,一个按钮可以动态添加文本字段。我遗漏了一些东西,因为当我点击“添加”按钮时,它不会动态添加一个新的文本框。有人能告诉我我错过了什么吗,

app-component.ts`

代码语言:javascript
运行
复制
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

代码语言:javascript
运行
复制
<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

代码语言:javascript
运行
复制
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 { }
EN

回答 1

Stack Overflow用户

发布于 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是空的。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/54569275

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档