Angular11动态输入字段粘贴时input事件未触发取值异常问题

动态字段取值失败、粘贴事件不触发的核心原因是响应式表单的FormArray绑定逻辑错误，和粘贴事件本身无关：

• 没有给动态字段的循环容器添加formArrayName="parameters"指令，Angular无法识别循环控件归属的表单数组节点
• 循环FormArray控件时写死了formControlName="parameter"，但FormArray内的控件是按索引存储的，不存在名为parameter的子控件，输入框根本没有和表单模型完成绑定，不管是输入还是粘贴操作，值都不会同步到表单数据层
• 单独绑定paste事件做实时预览覆盖场景不全，响应式表单自带的值变更监听可以覆盖所有值更新场景，不需要额外绑定原生事件

1. 调整TS文件代码 #

首先添加FormArray的访问器方便模板调用，再通过表单的值变更监听实现全场景实时预览：

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

@Component({
  selector: 'app-quick-send',
  templateUrl: './quick-send.component.html'
})
export class QuickSendComponent implements OnInit {
  quickSendForm = this.fb.group({
    toNumber: [''], // 补全静态字段声明，避免静态字段绑定隐式报错
    parameters: this.fb.array([])
  })

  // 实时预览内容
  previewContent = '';

  // FormArray访问器，简化模板调用
  get parameters() {
    return this.quickSendForm.get('parameters') as FormArray;
  }

  constructor(private fb: FormBuilder) {}

  ngOnInit() {
    // 监听全表单值变更，覆盖输入、粘贴、代码赋值等所有值更新场景
    this.quickSendForm.valueChanges.subscribe(formVal => {
      // 按需求拼接预览内容
      this.previewContent = `收件号码：${formVal.toNumber || ''}\n`;
      this.parameters.controls.forEach((ctrl, idx) => {
        this.previewContent += `参数${idx + 1}：${ctrl.value || ''}\n`
      })
    })
  }

  // 动态新增参数字段的方法示例
  addParamField() {
    this.parameters.push(this.fb.control(''));
  }

  submit() {
    console.log(this.quickSendForm.value)
    // 提交逻辑
  }
}

2. 调整HTML模板文件代码 #

修复FormArray的绑定路径，直接绑定循环出的控件实例，添加预览区域渲染：

<form [formGroup]="quickSendForm" #formDirective="ngForm" (ngSubmit)="submit()">
  <div>
    <mat-form-field>
      <textarea matInput placeholder="To number" rows="5" maxlength="1300" name="toNumber" id="toNumber" formControlName="toNumber"></textarea>
    </mat-form-field>
  </div>

  <!-- 必须添加formArrayName指令，声明内部循环控件归属的表单数组 -->
  <div formArrayName="parameters">
    <div *ngFor="let param of parameters.controls; let i=index" class="col-md-3">
      <mat-form-field>
        <!-- 直接绑定当前循环出的控件实例，不要写死formControlName -->
        <input 
          matInput 
          type="text" 
          placeholder="Parameter- {{ i + 1 }}" 
          name="parameter_{{i}}" 
          id="showCustomParameter{{ i + 1 }}" 
          [formControl]="param"
        >
      </mat-form-field>
    </div>
  </div>

  <!-- 预览区域 -->
  <div class="preview-box">
    {{ previewContent }}
  </div>

  <button type="submit" mat-raised-button color="primary">提交</button>
</form>

• 之前静态字段能正常取值，是因为toNumber直接挂载在根FormGroup下，绑定路径正确；动态字段属于嵌套的FormArray节点，必须按层级写对表单绑定指令
• 不要单独绑定(paste)事件做预览，valueChanges会捕获所有触发值更新的操作，包括快捷键粘贴、右键粘贴、手动输入、代码动态赋值，不会出现场景遗漏
• 循环内input的name属性建议加索引做唯一标识，避免Angular表单指令识别冲突

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