如何在Angular中用TypeScript编写更精简的FormGroup表单联动代码

架构老林

2026-10-12

优化方案

核心思路是通过预定义下拉值和对应表单控件的映射关系，消除冗余的if判断，同时统一处理清空逻辑，大幅缩短代码长度的同时提升可维护性。

第一步：在组件内预先定义映射关系

// 下拉选项值 -> 对应要填充日期的表单控件名 映射表
private readonly etatDateMap: Record<string, string> = {
  "Contrat Cadre": "Date_StatEs",
  "En service": "Date_StatCC",
  "Contrat définitif": "Date_StatQ",
  "Prospection": "Date_StatCp",
  "Quotation": "Date_StatCs"
};
// 所有关联的日期控件名集合
private readonly allDateFields = Object.values(this.etatDateMap);

第二步：改写`listenEtat`方法

listenEtat(value: string) {
  const currentDate = moment(Date.now()).format('lll');
  // 先统一清空所有日期控件的值
  this.allDateFields.forEach(field => this.formClient.get(field)?.setValue(''));
  // 匹配到对应控件则填充日期
  const targetField = this.etatDateMap[value];
  targetField && this.formClient.get(targetField)?.setValue(currentDate);
}