Angular响应式表单(Reactive Form)无报错但页面输入框不显示

问题根因分析 #

你遇到的表单输入框不显示但无控制台报错的问题，核心是表单配置和Material组件使用不规范导致的渲染异常，你观察到的<form ng-reflect-form=[object Object]是Angular开发模式下的正常属性绑定调试标记，不属于异常。具体问题点如下：

• 响应式表单与模板驱动表单配置冲突：<form>标签同时绑定了响应式表单的[formGroup]和模板驱动表单的导出#myForm="ngForm"，两种表单模式混用会导致表单实例识别异常，打断控件渲染链路
• Material表单控件配置不规范：空的<mat-label></mat-label>不符合Angular Materialmat-form-field的渲染要求，会导致输入框被样式折叠隐藏
• 变更检测时序异常：初始化阶段重复手动调用cdr.detectChanges()，导致表单reset和patchValue的状态变更没有被模板正确消费

修复步骤 #

1. 修正form标签配置，移除模板驱动表单的冗余声明
   将模板中的form标签修改为：

<form [formGroup]="formGroup" class="integration-form">

2. 修复mat-form-field配置，二选一即可：

• 方案1：补全label内容

<mat-form-field appearance="outline" class="full-width">
  <input matInput autofocus formControlName="businessName" />
  <mat-label>企业名称</mat-label>
</mat-form-field>

• 方案2：不需要显示label的话，删除空mat-label并补充无障碍属性

<mat-form-field appearance="outline" class="full-width">
  <input matInput autofocus formControlName="businessName" aria-label="企业名称" />
</mat-form-field>

3. 清理冗余变更检测调用，调整表单初始化逻辑
   修改component.ts中的初始化代码：

ngOnInit(): void {
  this.getUserInfo();
}

getUserInfo() {
  const businessName = `Pur'n'Kleen Water Company`,
        firstName = 'Jim',
        lastName = 'Holden',
        emailAddress = 'holdenj@unnavy.gov';
  // 如果需要先清空表单再填充，可直接调用reset方法传值，无需分开调用reset和patchValue
  this.formGroup.reset({
    firstName: firstName,
    lastName: lastName,
    email: emailAddress,
    businessName: businessName
  });
}

修改完成后输入框即可正常渲染，预填充的数据也会正常显示。

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