Angular+TypeScript如何通过变量动态调用表单控件setValue方法

你完全可以通过动态属性访问来实现这个需求，不用写一堆重复的函数！之前的写法出错是因为语法用得不对，我来给你具体拆解一下：

核心问题分析 #

你尝试的this.myForm.controls.inputRandom[name]写法有问题，因为inputRandom是一个变量，你需要用方括号语法来访问它的属性，同时控件名也需要用方括号来动态获取。正确的姿势是把动态的控件名放在方括号里，像这样：

this.myForm.controls[inputName].setValue(btnValue);

完整实现示例 #

TypeScript代码 #

首先定义一个通用的赋值函数，接收要赋值的value和目标控件的controlName：

import { Component } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponent {
  myForm = new FormGroup({
    inputName1: new FormControl(''),
    inputName2: new FormControl(''),
    inputName3: new FormControl('')
  });

  // 通用的动态赋值函数
  mySetValue(btnValue: any, controlName: string) {
    // 检查控件是否存在，避免报错
    if (this.myForm.controls[controlName]) {
      this.myForm.controls[controlName].setValue(btnValue);
    } else {
      console.warn(`控件 ${controlName} 不存在`);
    }
  }
}

HTML代码 #

在模板里调用这个函数时，直接传入对应控件的名字和要赋的值即可：

<label>random input name 1 
  <input type="number" formControlName="inputName1" class="form-input"> 
  <button (click)="mySetValue(123, 'inputName1')">设置值为123</button>
</label>

<label>random input name 2 
  <input type="number" formControlName="inputName2" class="form-input"> 
  <button (click)="mySetValue(456, 'inputName2')">设置值为456</button>
</label>

<label>random input name 3 
  <input type="number" formControlName="inputName3" class="form-input"> 
  <button (click)="mySetValue(789, 'inputName3')">设置值为789</button>
</label>

为什么之前的写法不对？ #

你之前的代码里let inputRandom :any = {name : 'inputName1'}; this.myForm.controls.inputRandom[name]，这里的inputRandom是一个对象，而你想访问的是它的name属性值，所以正确的获取方式应该是inputRandom.name，然后把这个值放到方括号里：

let inputRandom: any = {name: 'inputName1'};
this.myForm.controls[inputRandom.name].setValue(btnValue);

这样就能正确解析成this.myForm.controls.inputName1.setValue(btnValue)啦！

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