Angular响应式表单：如何正确从服务设置表单控件值并提交

你的问题出在组件初始化顺序和响应式表单绑定方式两个核心点上：

• 类属性的初始化优先级高于ngOnInit钩子：payForm在组件实例创建时就已经用初始值"test"完成了初始化，后续ngOnInit里修改this.date不会自动同步到表单控件。
• 模板里用[value]="date"只是单向绑定了输入框的显示值，并没有和响应式表单的date控件建立关联——这就导致输入框看起来显示了服务的值，但表单控件的实际提交值还是初始的"test"。

方式一：在ngOnInit中初始化表单 #

把表单初始化逻辑移到ngOnInit，确保拿到服务的值后再创建表单：

public date:string = "test";
public payForm!: FormGroup; // 用非空断言声明表单变量

ngOnInit(): void {
  this.date = this.calendarService.date;
  // 拿到服务值后再初始化表单
  this.payForm = this.formbuilder.group({
    date: [this.date, [], []],
  })
}

方式二：保留表单初始声明，在ngOnInit中更新控件值 #

如果需要提前声明表单，可以在ngOnInit里通过patchValue或setValue更新控件值：

public date:string = "test";

public payForm: FormGroup = this.formbuilder.group({
  date: [this.date, [], []],
})

ngOnInit(): void {
  this.date = this.calendarService.date;
  // 更新表单控件值
  this.payForm.patchValue({
    date: this.date
  });
}

模板强制修正：使用响应式表单绑定 #

无论采用哪种方式，模板都要改用formControlName和表单建立关联，替代[value]——这样输入框的变化才会同步到表单，提交时才能拿到正确的值：

<form id="payform" [formGroup]="payForm" >
  <input matInput formControlName="date">
</form>

Angular组件的初始化流程是固定的：

1. 类属性先完成初始化
2. 构造函数执行
3. ngOnInit钩子触发
   所以如果依赖服务数据初始化表单，必须把表单初始化或控件值更新放在ngOnInit（或更靠后的生命周期钩子）里，确保数据已经获取到位。

内容的提问来源于stack exchange，提问作者Bayes-T