Angular 中动态访问表单控件值的正确方式

在 Angular 中，若需通过函数参数动态获取 FormGroup 内指定控件的值，必须使用方括号语法 controls[controlName] 而非点语法 controls.controlName，否则 TypeScript 会报错且运行时无法解析变量名。

在 angular 中，若需通过函数参数动态获取 `formgroup` 内指定控件的值，必须使用方括号语法 `controls[controlname]` 而非点语法 `controls.controlname`，否则 typescript 会报错且运行时无法解析变量名。

在模板中传递控件名（如 bar）作为字符串参数是常见需求，例如：

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

注意：此处应传入 字符串字面量 ‘bar’（而非变量 bar），确保传入的是控件的名称（key），而非其值或未定义变量。

对应 TypeScript 方法需使用动态属性访问语法——即方括号表示法（bracket notation）：

callFoo(controlName: string): void {const control = this.someFormGroup.controls[controlName];   if (control) {console.log('Print:', control.value);   } else {console.warn(`Form control '${controlName}' not found in FormGroup.`);   } }

✅ 正确性关键点：

• this.someFormGroup.controls.gotInput 是错误写法：TypeScript 将 gotInput 视为字面属性名，而非变量，等价于访问 controls[‘gotInput’]（而非 controls[‘bar’]）；
• this.someFormGroup.controls[gotInput] 才是动态访问：gotInput 作为变量被求值，其字符串值（如 ‘bar’）用作键名。

⚠️ 注意事项：

• 确保 someFormGroup 已初始化且包含对应控件，建议添加空值校验（如示例中的 if (control)）；
• 控件名区分大小写，需与 FormGroup 构建时定义的 key 完全一致；
• 若使用 AbstractControl.get() 更具可读性和类型安全（推荐）：

callFoo(controlName: string): void {const control = this.someFormGroup.get(controlName);   if (control) {console.log('Print:', control.value);   } }

get() 方法不仅支持嵌套路径（如 ‘address.city’），还具备更好的类型推导和 Angular 官方推荐性，是比直接操作 controls 对象更健壮的选择。

总结：动态访问表单控件值的本质是 运行时属性查找，必须使用方括号语法或 get() API；避免混淆变量名与字面属性名，是解决此类“value never read”提示及运行时 undefined 的根本所在。