Question

我在我的角度应用程序中使用了反应形式。我正在使用自定义验证来检查结束时间是否晚于开始时间。在添加页面中时，验证工作正常。但是当我编辑记录时，验证器似乎无法正常工作。

createForm() {
        this.sessionForm = this.formBuilder.group({
          sessionCode: [''],
          sessionName: ['', Validators.required],
          sessionTimeGroup: this.formBuilder.group({
            startTime: ['', Validators.required],
            endTime: ['', Validators.required]
          }, { validator: SessionTimesValidator('startTime','endTime')}),
          disabled: [''],
        },);

}

import { FormGroup, ValidatorFn } from '@angular/forms';
import * as moment from 'moment';

export function SessionTimesValidator(startTimeControlName: string, endTimeControlName: string): ValidatorFn {
    return (formGroup: FormGroup): { [key: string]: any } | null => {

        const startTimeControl = formGroup.get(startTimeControlName);
        const endTimeControl = formGroup.get(endTimeControlName)

        const startTimeValue = startTimeControl.value;
        const endTimeValue = endTimeControl.value;

        if (startTimeControl.pristine || endTimeControl.pristine) {
            return null;
        }

        let validationResult = null;

        if(startTimeValue !== null && endTimeValue !== null) {
            const sTime = moment(`${startTimeValue.hour}:${startTimeValue.minute}`,'HH:mm');
            const eTime = moment(`${endTimeValue.hour}:${endTimeValue.minute}`,'HH:mm');
            if(eTime.isBefore(sTime)) {
                validationResult =  {'sessionTime': {value: 'End Time must be after the Start Time'}};
            }
        }

        return validationResult;
    };
}




 saveSession(): void {
        this.submitted = true;

        if (!this.sessionForm.invalid) {

          const sessionToSave = SessionFormMapper.mapToModel(this.sessionForm.value);


        }
    }

谢谢

Answer 1

要更新您的表单，

您需要使用新值来修补表单。

this.sessionForm.patch({
    ... 
  },{emitEvent:false});

对无限循环怀有敬意。如果您在验证时自动保存表单。如果没有emitEvent:false，则更新后的值将开始验证，并再次保存...

角反应形式跨字段自定义验证在编辑中不起作用

1 个答案: