Angular响应式表单input绑定value无法预填值但placeholder正常

• 核心冲突：你使用了Angular响应式表单的formControlName指令绑定输入框，此时输入框的显示值完全由对应FormControl实例中存储的值管控，你主动给原生value属性赋的值会被FormControl的默认空值覆盖，因此无法生效。而placeholder不属于表单控件的值属性，不受响应式表单逻辑管控，所以可以正常渲染user.name的内容。
• 语法错误：你当前value属性的绑定写法不规范，正确的属性绑定写法应为[value]="user.name"或value="{{user.name}}"，但该问题非核心诱因，即使修正写法依然会被FormControl的值覆盖。
• 额外小问题：代码中id="nane"为拼写错误，建议修正为id="name"避免其他关联逻辑出现问题。

方案1：异步获取用户后给FormControl赋值（推荐） #

在组件类中订阅authService.user$，拿到用户数据后调用setValue/patchValue给对应表单控件赋值，模板无需保留value绑定：

// 组件类核心代码
ngOnInit(): void {
  this.authService.user$.subscribe(user => {
    if (user) {
      // 单个控件赋值
      this.yourForm.get('name')?.setValue(user.name);
      // 多控件批量赋值可使用patchValue：this.yourForm.patchValue({name: user.name})
    }
  })
}

修正后的模板代码：

<input 
  *ngIf="authService.user$ | async as user" 
  type="text" 
  id="name" 
  name="name" 
  class="form-control" 
  formControlName="name" 
  [ngClass] = "{'error': isInvalid('name')}"
/>

方案2：表单初始化时直接设置初始值（仅适用于用户信息同步可用场景） #

如果用户信息在表单初始化时就已经同步获取完成，可以在创建FormGroup时直接给name控件设置初始值：

this.yourForm = new FormGroup({
  name: new FormControl(this.authService.user.name, [Validators.required]),
  // 其他表单控件定义
})

方案3：模板中直接绑定值（不推荐） #

如果希望直接在模板中完成赋值，可以使用[value]绑定同时配合输入事件同步值到FormControl，这种属于响应式表单和模板驱动表单的混用写法，容易造成数据不一致，非特殊情况不建议使用：

<input 
  *ngIf="authService.user$ | async as user" 
  type="text" 
  id="name" 
  name="name" 
  class="form-control" 
  formControlName="name" 
  [ngClass] = "{'error': isInvalid('name')}"
  [value]="user.name"
  (input)="yourForm.get('name')?.setValue($any($event.target).value)"
/>

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