Angular点击事件传参后，如何正确获取表单组对应控件的值？

你的代码存在两个核心问题：

• 函数参数gotInput被声明但未实际使用，导致TypeScript提示'Value is declared but its value is never read'
• 错误地将参数名当作FormGroup控件的固定名称访问，无法动态获取目标控件的值

修正后的模板代码 #

<button (click)="callFoo('bar')">Click Me!</button>
<!-- 传入控件名称的字符串，比如这里的'bar'对应FormGroup里的控件名 -->

修正后的TS代码 #

callFoo(controlName: string) {
    // 通过传入的控件名字符串动态访问FormGroup控件
    const controlValue = this.someFormGroup.controls[controlName]?.value;
    console.log("Print: ", controlValue);
}

补充说明 #

如果你的bar是组件类中定义的变量（比如bar = 'username'，存储控件名称），模板可以直接传变量：

<button (click)="callFoo(bar)">Click Me!</button>

TS代码保持上述写法即可，此时bar的变量值会作为控件名传入函数，动态获取对应控件的值。

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