角形式：添加文本区域会改变其他的值答案

【问题标题】：Angular forms: adding text area changes the values of the other ones角形式：添加文本区域会改变其他的值
【发布时间】：2020-08-28 02:40:16
【问题描述】：

我正在处理表单并尝试为其添加动态文本区域。但是当我单击添加按钮时，它工作正常，但它会使用新文本区域的值更改所有以前的值。

我试图提取代码，但没有让它在 stackblitz 上运行（这是我的尝试：https://stackblitz.com/edit/angular-ivy-tns7nv?file=src%2Fapp%2Fapp.component.html）

我也尝试过删除 this.changesDetector.detectChanges();但它仍然不起作用，我有一个错误：ExpressionChangedAfterItHasBeenCheckedError

这是我的代码： .ts：

import {
  Component,
  Input,
  OnChanges,
  OnInit,
  ChangeDetectorRef
} from "@angular/core";
import {
  FormBuilder,
  FormControl,
  FormGroup,
  Validators
} from "@angular/forms";

export interface BlockComment {
  id?: any;
  comment?: string;
}


@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit {
  finalComment: string[] = [];
  formProjet1: FormGroup;
  blockComment: BlockComment[] = [
    {
      id: 0,
      comment: ""
    }
  ];

  constructor(
    private formBuilder: FormBuilder,
    private changesDetector: ChangeDetectorRef
  ) {}

  ngOnInit() {
    this.initForm();
  }

  initForm() {
    this.formProjet1 = this.formBuilder.group({
      comments: new FormControl("")
    });
  }

  addTextareaComment() {
    const id = new Date().getTime().toString();
    this.blockComment.push({
      id,
      comment: "TEST" // <-- THIS VALUE
    });
    this.changesDetector.detectChanges();
  }

  private getComments(): string[] {
    this.finalComment = [];
    for (const comment of this.blockComment) {
      this.finalComment.push(comment.comment);
    }
    return this.finalComment;
  }
}

.html

<div>
<form name="formProjet1" [formGroup]="formProjet1" class="repeater">
   <button (click)="addTextareaComment()" class="btn btn-primary ">Add comm</button>
   <br>
   <div>
      <div>
         <div class="form-group">
            <div class="row" *ngFor="let block of blockComment">
               <div class="col-md-9">
                  <textarea class="form-control"
                  type="text"
                  name="comments"
                  formControlName="comments"
                  [(ngModel)]="block.comment">
                  </textarea>
               </div>
            </div>
         </div>
      </div>
   </div>
</form>
</div>

【问题讨论】：

标签： html angular forms

【解决方案1】：

每个textarea 都绑定到同一个formControlName="comments"。一个表单控件 - 一个值。你需要FormArray。

blockComment 属性无法与FormArray 配合使用。将所有数据存储在FormArray 中而不是将其分散在blockComment 和FormArray 中会更实用。

PS 您需要手动调用来检测更改，因为this.blockComment.push 不会更新blockComment 中的引用。 More details about arrays and change detection in this articcle.

【讨论】：

谢谢，我试试看！