Angular根据模型属性设置表单timeUnit字段值的实现方法

• 你当前在响应式表单里混用ngModel和formControlName的写法本身就不符合Angular官方规范，官方从Angular 6之后就不推荐这种混合用法，后续版本升级容易出兼容问题。
• 加hidden input同步表单值的方案属于冗余实现，完全不需要额外插入DOM节点就能完成值同步。

正确实现逻辑 #

你既然用了Angular响应式表单（模板里写了formControlName），所有表单值的读写都应该直接通过表单控件实例的API完成，不需要靠hidden input做中转，也不需要ngModel做双向绑定：

1. 初始化表单组的时候，直接给timeUnit控件绑定和业务属性一致的初始值
2. 当业务属性selectedPeriodOfActivityTimeUnit变化、或者isMinutesAllowed()状态切换时，直接调用表单控件的setValue方法更新timeUnit字段的值即可
3. 如果需要同步下拉框选中的值到业务属性，直接监听表单控件的valueChanges事件就行，不用ngModel

参考代码 #

组件类代码 #

import { Component } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';

@Component({
  selector: 'app-time-input',
  templateUrl: './time-input.component.html'
})
export class TimeInputComponent {
  form: FormGroup;
  private _selectedPeriodOfActivityTimeUnit = 'DAYS'; // 默认值按业务需求设置

  get selectedPeriodOfActivityTimeUnit() {
    return this._selectedPeriodOfActivityTimeUnit;
  }
  set selectedPeriodOfActivityTimeUnit(val: string) {
    this._selectedPeriodOfActivityTimeUnit = val;
    // 业务属性变更时直接同步更新表单控件值，无需DOM中转
    this.form.get('timeUnit')?.setValue(val, { emitEvent: false });
  }

  constructor(private fb: FormBuilder) {
    this.form = this.fb.group({
      periodOfInactivity: [1, [Validators.min(1), Validators.required]],
      timeUnit: [this.selectedPeriodOfActivityTimeUnit] // 初始值直接绑定业务属性
    });

    // 监听下拉框选择变化，同步更新业务属性，替代ngModel双向绑定
    this.form.get('timeUnit')?.valueChanges.subscribe(val => {
      this._selectedPeriodOfActivityTimeUnit = val;
    });
  }

  isMinutesAllowed(): boolean {
    // 替换成你自己的业务判断逻辑
    return true;
  }

  getTimeUnit() {
    return this.isMinutesAllowed() ? ['DAYS', 'MINUTES'] : ['DAYS'];
  }
}

模板代码 #

<div> 
  <div class="div-table-col" *ngIf="!isMinutesAllowed()"> 
    Players who have been inactive for past
    <input type="number" min="1" step="1" formControlName="periodOfInactivity">
    <select formControlName="timeUnit">
      <option *ngFor="let unit of getTimeUnit()" [ngValue]="unit">{{unit}}</option>
    </select>
  </div>
  <div class="div-table-col" *ngIf="isMinutesAllowed()"> 
    Players who have been inactive for past
    <input type="number" min="1" step="1" formControlName="periodOfInactivity">
    {{ selectedPeriodOfActivityTimeUnit == 'DAYS' ? 'days' : 'minutes' }}
    <!-- 无需添加hidden input，值同步逻辑全部在组件类中完成 -->
  </div>
</div>

补充说明 #

• 如果你的分钟单位支持状态是异步加载判断的（比如从接口拉取配置后才知道是否支持分钟），只需要在配置加载完成、拿到isMinutesAllowed结果的地方，直接调用this.form.get('timeUnit').setValue(对应单位值)即可，不需要修改模板结构。
• 这种实现没有冗余DOM节点，完全遵循Angular响应式表单的设计规范，后续维护、做表单校验、提交时值获取都和普通响应式表单逻辑一致，不会出现隐藏字段导致的值不同步问题。

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