Angular响应式表单问题：首个输入框未同步FormBuilder值

核心原因分析 #

你的问题大概率来自两个点：

1. 表单创建时机与DOM渲染顺序不匹配，导致Bootstrap浮动标签组件未检测到输入框的初始值变化，视觉上显示为空（实际表单值存在）
2. 原生checked属性与表单绑定逻辑冲突（针对单选框）

解决方案 #

1. 优化表单初始化逻辑（优先推荐）

不要在异步订阅回调中创建表单，先初始化空表单，再通过patchValue赋值，确保表单与DOM绑定更及时：

import { FormGroup } from '@angular/forms';

myForm: FormGroup; // 避免使用any，明确类型
expense: any;

constructor(private fb: FormBuilder, private exService: ExpenselistService, private route: ActivatedRoute) {
  // 提前初始化空表单
  this.myForm = this.fb.group({
    extitle: ['', [Validators.required]],
    examount: ['', [Validators.required, Validators.min(1)]],
    extype: ['', [Validators.required]]
  });

  this.route.queryParams.subscribe(res => {
    this.exService.load('expdata', res['token']).subscribe(data => {
      this.expense = data;
      // 用patchValue批量设置表单值
      this.myForm.patchValue({
        extitle: this.expense.title,
        examount: this.expense.amount,
        extype: this.expense.type
      });
    });
  });
}

2. 修复单选框的checked属性冲突

原视图中第一个单选框的checked属性会覆盖表单绑定的初始值，导致逻辑混乱，直接移除该属性：

<div class="mb-2 text-center">
  <div class="form-check form-check-inline">
    <input class="form-check-input" type="radio" formControlName="extype" id="exdebit" value="debit">
    <label class="form-check-label" for="exdebit">Debit</label>
  </div>
  <div class="form-check form-check-inline">
    <input class="form-check-input" type="radio" formControlName="extype" id="excredit" value="credit">
    <label class="form-check-label" for="excredit">Credit</label>
  </div>
</div>

3. 手动触发Bootstrap浮动标签状态更新（可选）

如果优化表单后仍存在视觉显示问题，可在赋值后手动触发输入框的input事件，让Bootstrap更新浮动标签状态：

// 在patchValue之后添加
const titleInput = document.getElementById('title');
if (titleInput) {
  titleInput.dispatchEvent(new Event('input'));
}

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