Angular响应式表单未显示预期值问题排查

1. 初始化禁用控件的方式是正确的 #

Angular的FormBuilder支持通过数组语法初始化FormControl，当需要同时设置控件初始值和禁用状态时，[{ value: '123', disabled: true }]是官方认可的写法——数组第一个元素为包含value（初始值）和disabled（状态）的配置对象，后续元素可按需添加验证器或异步验证器。

2. 更新值时的错误原因 #

你遇到的输入框显示[object Object]的问题，是因为错误地将控件的value设置成了一个对象。FormControl的value属性对应输入框的实际显示值（此处为字符串类型），而disabled是控件的独立状态属性，不属于value的组成部分。

执行this.testForm.get('testControl').setValue({ value: 'abcdefg', disabled: false })时，相当于把控件的value赋值为这个配置对象，输入框会将对象转为字符串，最终显示[object Object]。

而IDE报错“字符串无法分配给类型{ value: string; disabled: boolean; }”，是因为强类型表单的类型定义有误——你可能错误地将testControl的类型定义为了初始化用的配置对象，而非实际的value类型（字符串）。

3. 正确的更新方式 #

方式一：仅更新值

先修正强类型表单的类型定义：

// 定义表单类型接口
interface TestForm {
  testControl: string;
}

// 初始化表单
testForm: FormGroup<TestForm> = this.fb.group({
  testControl: [{ value: '123', disabled: true }],
});

之后直接传入字符串更新值：

this.testForm.get('testControl')?.setValue('abcdefg');

方式二：同时更新值和禁用状态

如果需要在更新值的同时修改控件的禁用状态，需分开操作：

const control = this.testForm.get('testControl');
// 更新值
control?.setValue('abcdefg');
// 启用控件（禁用则调用disable()方法）
control?.enable();

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