mat-form-field中无法为input元素设置默认值问题

问题原因 #

当使用 formControlName 绑定响应式表单控件时，Input 标签上的 value 属性会被 FormControl 的值完全覆盖。如果 this.data.element?.minute_glow_periodic 为 undefined，FormControl 就没有初始值，导致输入框为空，直接在模板里写 value="4" 不会生效。

解决方法 #

方法1：给 FormControl 设置兜底默认值

初始化 FormControl 时，为可能为空的数据源设置兜底值，确保输入框有初始值：

this.form = this.formBuilder.group({
  minute_glow_periodic: new UntypedFormControl({ 
    value: this.data.element?.minute_glow_periodic ?? 4, // 当数据源为空时用4作为默认值
    disabled: false 
  }),
});

同时移除模板 Input 上的 value="4"（因为 FormControl 已接管值的控制）：

<mat-form-field appearance="fill" class="time_field">
    <mat-label>{{ minute | async}}</mat-label>
    <input matInput type="number" formControlName="minute_glow_periodic" min="0" max="60">
</mat-form-field>

方法2：用 patchValue 动态设置初始值

如果需要在组件初始化后根据条件设置默认值，可在 ngOnInit 中调用 patchValue：

ngOnInit(): void {
  // 当数据源无值时，设置默认值4
  if (!this.data.element?.minute_glow_periodic) {
    this.minuteGlowPeriodic?.patchValue(4);
  }
}

关键说明 #

Angular 响应式表单中，FormControl 是输入值的唯一数据源，模板 Input 的 value 属性优先级低于 FormControl 的值，因此必须通过 FormControl 来控制初始值，而非直接在 Input 标签上设置 value。

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