Angular中如何在blur事件中动态为ngModel赋值

在HTML中有多个绑定了[(ngModel)]的输入文本框，想要在TypeScript中通过输入框的blur事件，为所有输入框的[(ngModel)]动态赋值，尝试了字符串拼接赋值的方法但报错，具体代码如下：

HTML代码 #

<input name="perStdAmount" #input [(ngModel)]="perStdAmount"  formControlName="perStdAmountCtrl" (blur)="transformAmount($event, input)">

<input name="perStepUpAmount" #input [(ngModel)]="perStepUpAmount" formControlName="perStepUpAmountCtrl" (blur)="transformAmount($event, input)">

<input name="dailyStdAmount" #input [(ngModel)]="dailyStdAmount" formControlName="dailyStdAmountCtrl" (blur)="transformAmount($event, input)">

TypeScript代码 #

transformAmount(event,inputName) {
  // 需要把event.target.value赋值给inputName.name对应的ngModel变量
  // inputName.name是ngModel绑定的变量名，比如第一个输入框的perStdAmount
  
  // 尝试以下写法但无效
  console.log('this.'.concat(inputName.name)); // 输出this.perStdAmount，想复用函数处理所有输入框
  'this.'.concat(inputName.name) = event.target.value; // 报错：赋值表达式的左侧必须是变量或属性访问器
}

字符串拼接无法直接作为赋值目标，改用对象方括号访问语法就能动态操作类属性：

修改transformAmount函数如下：

transformAmount(event, inputElement) {
  const modelKey = inputElement.name;
  // 动态赋值给对应的ngModel绑定变量
  this[modelKey] = event.target.value;

  // 若需同步更新表单控件（可选），替换yourFormGroup为实际表单组变量名
  this.yourFormGroup.get(`${modelKey}Ctrl`)?.setValue(event.target.value);
}

额外提示 #

• 确保组件类中已定义perStdAmount、perStepUpAmount、dailyStdAmount这些属性，否则会出现未定义错误。
• 模板中重复的#input引用变量建议修改为唯一命名（比如#perStdInput），避免局部作用域内的标识混淆。
• 如果使用了Angular表单组，同步更新表单控件能保证ngModel和表单控件的值一致，避免数据不一致问题。

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