为何我的Angular FormControl启用后显示[object Object]？

FormControl默认值取自组件数据，禁用状态下显示正常，但启用后输入框中显示[object Object]。组件与项目中其他正常工作的组件几乎一致，无法定位问题所在。

相关代码 #

TypeScript代码 #

ngOnInit(): void {
    this.form = this.fb.group({
      scannerName: [
        { value: this.data.scannerObject.scannerName /* , disabled: true */ },
        [ Validators.required ],
      ]
    });
}

HTML代码 #

<form [formGroup]="form" (submit)="save$.next($event)">
  <mat-dialog-content class="mat-typography">
    <div class="content">
      <div class="d-flex">
        <mat-form-field class="m-1" appearance="outline" formErrors="scannerName">
          <mat-label>Name</mat-label>
          <input matInput type="string" name="scannerName" formControlName="scannerName" aria-label="scanner-name" />
          <mat-error formError="required" when="touched">Required</mat-error>
        </mat-form-field>
      </div>
    </div>
  </mat-dialog-content>
  <mat-dialog-actions align="end">
    <button type="button" mat-dialog-close>Cancel</button>
    <button type="submit">Save</button>
  </mat-dialog-actions>
</form>

问题出在FormControl的初始化逻辑：当你用{ value: ... }对象作为初始值传入时，这个对象会被直接当作FormControl的实际值存储。禁用状态下，Angular的输入框组件会特殊处理，展示对象里的value字段；但启用后，输入框会尝试将整个对象转为字符串，于是就出现了[object Object]。

提供三种可行的修复方式，根据你的需求选择：

方式一：直接传入初始值（无需初始禁用） #

如果不需要一开始就禁用输入框，直接把值作为数组第一个元素传入即可：

ngOnInit(): void {
    this.form = this.fb.group({
      scannerName: [
        this.data.scannerObject.scannerName,
        [ Validators.required ],
      ]
    });
}

方式二：分开设置值与禁用状态（动态控制场景） #

如果需要后续动态切换禁用/启用状态，可以先初始化控件，再单独设置值和状态：

ngOnInit(): void {
    this.form = this.fb.group({
      scannerName: [
        '',
        [ Validators.required ],
      ]
    });

    // 设置初始值
    this.form.get('scannerName')?.setValue(this.data.scannerObject.scannerName);
    // 如需初始禁用，添加此行
    // this.form.get('scannerName')?.disable();
}

方式三：正确的带禁用状态初始化写法 #

如果需要在初始化时就设置禁用状态，要把值和配置对象分开，配置对象放在第二个参数位置：

ngOnInit(): void {
    this.form = this.fb.group({
      scannerName: [
        this.data.scannerObject.scannerName,
        { 
          validators: [Validators.required],
          // disabled: true // 开启此行即可初始禁用
        },
      ]
    });
}

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