LWC日期字段验证失败时onChange应保留旧值问题排查

要解决验证失败后字段未回退到旧值的问题，核心是提前存储合法的旧值，并在验证不通过时手动重置字段显示值。以下是具体实现步骤和代码修改建议：

关键思路 #

1. 保存字段初始值：在组件加载时，记录End_Date_Time__c的合法初始值（包括新建记录时自动计算的默认值）。
2. 监听字段变更：在用户修改结束日期时，触发验证逻辑。
3. 验证失败时重置：如果日期不符合要求，直接将字段值设回旧值，同时提示错误。

代码实现 #

修改后的HTML #

<lightning-record-edit-form object-api-name="Your_Object__c" 
                            record-id={recordId}
                            onload={handleLoad}>
    <lightning-input-field field-name="Start_Date_Time__c" readonly></lightning-input-field>
    <lightning-input-field field-name="End_Date_Time__c" 
                           onchange={handleEndDateChange}></lightning-input-field>
    <lightning-button type="submit" label="保存"></lightning-button>
</lightning-record-edit-form>

修改后的JS #

import { LightningElement, api } from 'lwc';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
import END_DATE_FIELD from '@salesforce/schema/Your_Object__c.End_Date_Time__c';
import START_DATE_FIELD from '@salesforce/schema/Your_Object__c.Start_Date_Time__c';

export default class YourComponentName extends LightningElement {
    @api recordId;
    endDateOldValue;
    startDate;

    handleLoad(event) {
        const recordData = event.detail.records[this.recordId];
        // 加载起始日期（编辑场景）
        this.startDate = new Date(recordData.fields[START_DATE_FIELD.fieldApiName].value);
        // 加载初始结束日期作为旧值
        this.endDateOldValue = recordData.fields[END_DATE_FIELD.fieldApiName].value;

        // 新建记录场景：自动计算符合要求的默认结束日期
        if (!this.recordId) {
            this.startDate = new Date(); // 起始日期为当前日期
            this.endDateOldValue = this.calculateRequiredEndDate();
            // 设置字段默认值
            this.template.querySelector(`lightning-input-field[data-field-name="${END_DATE_FIELD.fieldApiName}"]`).value = this.endDateOldValue;
        }
    }

    handleEndDateChange(event) {
        const newEndDateStr = event.target.value;
        const newEndDate = new Date(newEndDateStr);
        const requiredEndDate = this.calculateRequiredEndDate();

        // 验证用户选择的日期是否晚于要求的日期
        if (newEndDate < requiredEndDate) {
            // 重置字段为旧值
            event.target.value = this.endDateOldValue;
            // 显示错误提示
            this.dispatchEvent(new ShowToastEvent({
                title: '验证失败',
                message: '结束日期必须是起始日期之后的2个工作日（排除周六、周日）',
                variant: 'error'
            }));
            return;
        }

        // 验证通过，更新旧值
        this.endDateOldValue = newEndDateStr;
    }

    // 计算起始日期之后的2个工作日
    calculateRequiredEndDate() {
        let currentDate = new Date(this.startDate);
        let workdaysAdded = 0;

        while (workdaysAdded < 2) {
            currentDate.setDate(currentDate.getDate() + 1);
            const dayOfWeek = currentDate.getDay();
            // 跳过周六(6)和周日(0)
            if (dayOfWeek !== 0 && dayOfWeek !== 6) {
                workdaysAdded++;
            }
        }

        // 返回适配datetime字段的ISO格式字符串（保留到分钟）
        return currentDate;
    }
}

注意事项 #

• 日期格式统一：所有日期比较都使用Date对象，避免字符串格式差异导致的验证错误。
• 新旧值维护：只有在验证通过时才更新endDateOldValue，确保重置时始终用的是合法值。
• 新建/编辑场景兼容：分别处理新建记录（自动生成默认日期）和编辑记录（加载已有日期）的情况。

内容的提问来源于stack exchange，提问作者S.Sujendran