修复单个方法以处理多组日期字段的启用/禁用逻辑

需要修复现有方法，使其成为可处理多组日期输入字段的通用方法，实现选择“FROM”日期时启用对应的“TO”日期输入框，此前尝试用formGroup和formControlName未奏效。

原始HTML示例 #

<div class="display-flex flex-row width-full flex-align-end flex-row-override-480">
    <div class="width-half inline-input">
        <hvcore-form-field-date [dateMax]="dateMax | date:'yyyy-MM-dd'" [formGroup]="formGroup" formControlName="receiveDateFrom" class=""
label="Recipient Date:"></hvcore-form-field-date>
    </div>
    <span class="usa-label usa-label-inline margin-right-3 margin-left-3">To:</span>
    <div class="width-half inline-input">
        <hvcore-form-field-date [dateMax]="dateMax | date:'yyyy-MM-dd'" [formGroup]="formGroup" formControlName="receiveDateTo" class="" label=""></hvcore-form-field-date>
    </div>
</div>
        
<div class="display-flex flex-row width-full flex-align-end flex-row-override-480">
    <div class="width-half inline-input">
        <hvcore-form-field-date [dateMax]="dateMax | date:'yyyy-MM-dd'" [formGroup]="formGroup" formControlName="caseStatusDateFrom" class="" label="Status Date:" (change)="setStatusDate(formControlName.value)"></hvcore-form-field-date>
    </div>
    <span class="usa-label usa-label-inline margin-right-3 margin-left-3">To:</span>
    <div class="width-half inline-input">
        <hvcore-form-field-date [dateMax]="dateMax | date:'yyyy-MM-dd'" [formGroup]="formGroup" formControlName="caseStatusDateTo" class="" label=""></hvcore-form-field-date>
    </div>
</div>

原始TS示例 #

public setStatusDate($event: Event) {
    debugger;
    const disableEnableOptions = { emitEvent: true };
    const caseStatusDateFrom = this.formGroup.get("caseStatusDateFrom");
    const caseStatusDateTo = this.formGroup.get("caseStatusDateTo");
    caseStatusDateFrom?.valueChanges.subscribe((value) => {
        debugger;
        $event;
        if (value === "") {
            caseStatusDateTo?.disable(disableEnableOptions);
            caseStatusDateTo?.setValue(caseStatusDateFrom?.value)
        }
   
        else {
            caseStatusDateTo?.enable(disableEnableOptions);
    
            if (caseStatusDateTo?.value !== "" && caseStatusDateTo?.value < caseStatusDateFrom?.value) {
                caseStatusDateTo?.setValue(caseStatusDateFrom?.value);
            }
        }
    })
}

通用化解决方案 #

修改后的HTML #

给每个From日期控件绑定通用方法，传入对应的From/To控件名称，同时给To控件绑定初始禁用状态：

<div class="display-flex flex-row width-full flex-align-end flex-row-override-480">
    <div class="width-half inline-input">
        <hvcore-form-field-date 
            [dateMax]="dateMax | date:'yyyy-MM-dd'" 
            [formGroup]="formGroup" 
            formControlName="receiveDateFrom" 
            class=""
            label="Recipient Date:"
            (change)="handleDateFromChange('receiveDateFrom', 'receiveDateTo')">
        </hvcore-form-field-date>
    </div>
    <span class="usa-label usa-label-inline margin-right-3 margin-left-3">To:</span>
    <div class="width-half inline-input">
        <hvcore-form-field-date 
            [dateMax]="dateMax | date:'yyyy-MM-dd'" 
            [formGroup]="formGroup" 
            formControlName="receiveDateTo" 
            class="" 
            label=""
            [disabled]="!formGroup.get('receiveDateFrom')?.value">
        </hvcore-form-field-date>
    </div>
</div>
        
<div class="display-flex flex-row width-full flex-align-end flex-row-override-480">
    <div class="width-half inline-input">
        <hvcore-form-field-date 
            [dateMax]="dateMax | date:'yyyy-MM-dd'" 
            [formGroup]="formGroup" 
            formControlName="caseStatusDateFrom" 
            class="" 
            label="Status Date:" 
            (change)="handleDateFromChange('caseStatusDateFrom', 'caseStatusDateTo')">
        </hvcore-form-field-date>
    </div>
    <span class="usa-label usa-label-inline margin-right-3 margin-left-3">To:</span>
    <div class="width-half inline-input">
        <hvcore-form-field-date 
            [dateMax]="dateMax | date:'yyyy-MM-dd'" 
            [formGroup]="formGroup" 
            formControlName="caseStatusDateTo" 
            class="" 
            label=""
            [disabled]="!formGroup.get('caseStatusDateFrom')?.value">
        </hvcore-form-field-date>
    </div>
</div>

修改后的TS代码 #

实现通用联动逻辑，避免重复订阅和硬编码控件名称：

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

@Component({
  // 组件元数据（根据实际情况补充）
})
export class YourComponent implements OnInit {
  public formGroup: FormGroup;
  public dateMax: Date = new Date(); // 示例：设置最大日期为当前日期

  // 记录已订阅的控件，防止重复订阅导致内存泄漏
  private subscribedControls = new Set<string>();

  ngOnInit(): void {
    // 初始化时绑定所有日期组的联动逻辑
    this.setupDateGroup('receiveDateFrom', 'receiveDateTo');
    this.setupDateGroup('caseStatusDateFrom', 'caseStatusDateTo');
  }

  /**
   * 通用日期组联动设置方法
   * @param fromControlName From日期控件名称
   * @param toControlName To日期控件名称
   */
  private setupDateGroup(fromControlName: string, toControlName: string): void {
    if (this.subscribedControls.has(fromControlName)) return;

    const fromControl = this.formGroup.get(fromControlName);
    const toControl = this.formGroup.get(toControlName);
    if (!fromControl || !toControl) return;

    // 初始状态：From为空时禁用To
    if (!fromControl.value) {
      toControl.disable({ emitEvent: false });
    }

    // 监听From控件值变化，自动联动To控件
    fromControl.valueChanges.subscribe(value => {
      const operateOptions = { emitEvent: false };
      
      if (!value) {
        toControl.disable(operateOptions);
        toControl.setValue('', operateOptions);
      } else {
        toControl.enable(operateOptions);
        // 若To日期小于From日期，自动同步From的值
        if (toControl.value && toControl.value < value) {
          toControl.setValue(value, operateOptions);
        }
      }
    });

    this.subscribedControls.add(fromControlName);
  }

  /**
   * 适配自定义日期组件的change事件触发逻辑
   * @param fromControlName From日期控件名称
   * @param toControlName To日期控件名称
   */
  public handleDateFromChange(fromControlName: string, toControlName: string): void {
    const fromControl = this.formGroup.get(fromControlName);
    const toControl = this.formGroup.get(toControlName);
    if (!fromControl || !toControl) return;

    const value = fromControl.value;
    const operateOptions = { emitEvent: false };
    
    if (!value) {
      toControl.disable(operateOptions);
      toControl.setValue('', operateOptions);
    } else {
      toControl.enable(operateOptions);
      if (toControl.value && toControl.value < value) {
        toControl.setValue(value, operateOptions);
      }
    }
  }
}

关键修改说明 #

1. 通用参数化：通过传入控件名称参数，让方法支持任意多组日期控件，不再依赖硬编码。
2. 避免重复订阅：用集合记录已订阅的控件，防止多次触发订阅导致的内存泄漏和逻辑重复执行。
3. 初始状态处理：组件初始化时就设置To控件的禁用状态，保证页面加载时的状态正确。
4. 事件控制：使用{ emitEvent: false }避免设置值/状态时触发额外的valueChanges事件，防止循环触发。
5. 双向保障：同时支持valueChanges自动监听和change事件手动触发，适配不同自定义组件的事件逻辑。

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