Angular 15中Reactive Forms的FormArray运行时输入限制问题

问题出在你*ngFor遍历的是表单数组的value而非controls集合。每次输入字符时，表单值更新会触发Angular重新渲染整个循环，导致输入框失去焦点，表现为只能输入一个字符。

修复步骤 #

1. 在组件TS中添加表单数组的Getter #

在HwreactiveformComponent类中添加一个getter，方便模板安全访问表单数组的controls：

get detailsFormArray(): FormArray {
  return this.regform.get('details') as FormArray;
}

2. 修改模板中的*ngFor遍历对象 #

把模板里的regform.controls.details.value替换成上面定义的detailsFormArray.controls：

<div
  *ngFor="let d of detailsFormArray.controls; let i = index"
  [formGroupName]="i"
>

完整修改后的代码 #

HTML文件 #

<form [formGroup]="regform">
  <div formArrayName="details">
    <div
      *ngFor="let d of detailsFormArray.controls; let i = index"
      [formGroupName]="i"
    >
      <input
        type="text"
        placeholder="Enter Full Name"
        formControlName="fullName"
      />
      &nbsp;

      <input
        type="text"
        placeholder="Enter Roll Number"
        formControlName="rollNumber"
      />
      &nbsp;

      <input
        type="text"
        placeholder="Enter Class Details"
        formControlName="class"
      />&nbsp;

      <input
        type="text"
        placeholder="Enter Mobile Number"
        formControlName="mobileno"
      />&nbsp;

      <button
        style="
          background-color: #f44336;
          padding: 14px 20px;
          margin: 8px 0;
          border: none;
          cursor: pointer;
          opacity: 0.9;
        "
        (click)="deleteRow(i)"
      >
        X
      </button>
    </div>
  </div>
</form>

<br />

<div>
  <button
    style="
      background-color: #04aa6d;
      padding: 14px 20px;
      margin: 8px 0;
      border: none;
      cursor: pointer;
      opacity: 0.9;
    "
    (click)="addcontrol()"
  >
    Add
  </button>
</div>

TS文件 #

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

@Component({
  selector: 'app-hwreactiveform',
  templateUrl: './hwreactiveform.component.html',
  styleUrls: ['./hwreactiveform.component.css'],
})
export class HwreactiveformComponent implements OnInit {
  regform: FormGroup;

  constructor(private _fb: FormBuilder) {}

  ngOnInit(): void {
    this.regform = this._fb.group({
      details: this._fb.array([this.buildcontrol()]),
    });
  }

  get detailsFormArray(): FormArray {
    return this.regform.get('details') as FormArray;
  }

  buildcontrol() {
    return this._fb.group({
      fullName: [''],
      rollNumber: [''],
      class: [''],
      mobileno: [''],
    });
  }

  addcontrol() {
    this.detailsFormArray.push(this.buildcontrol());
  }

  deleteRow(index: number) {
    this.detailsFormArray.removeAt(index);
  }
}

原理说明 #

FormArray的controls是稳定的引用对象，不会随表单值变化而频繁更新，Angular不会因为值的变化重新渲染整个循环；而value是每次输入都会生成的新对象，会触发*ngFor重新生成DOM元素，导致输入框焦点丢失，最终表现为只能输入单个字符。

内容的提问来源于stack exchange，提问作者Abhishek Choubey