Question

我正在尝试使用startDate和endDate实现Angular 6表单使用PrimeNg日历（DatePicker），两个日期均为Date类型。

如何验证startDate <= endDate和endDate> = startDate。这是一个交叉验证。有人会认为Angular可能有一些工具。
当其中一种验证时，我看到了一些通用的Angular示例已经完成了，到目前为止都没有看到
也许使用管道？还是任何PrimeNg专用工具？

请告知。

TIA，奥列格。

Answer 1

您可以使用updateValueAndValidity函数，通过此函数，您可以随时验证控件，在这种情况下，修改startDate值，反之亦然。

验证功能必须预先添加到每个formControl中。

在endDate上验证startDate已更改。

this.formGroup.get('endDate').valueChanges.subscribe({
  next: (value) => {
    this.formGroup.get('startDate').updateValueAndValidity();
  }
});

Answer 2

您可以创建自定义验证器。

custom-validator.ts

export function DateLessThanOrEqualsValidator(dateCompareControlName: string) {

    let thisDateControl: AbstractControl;
    let otherDateControl: AbstractControl;

    return function DateLessThanOrEqualsValidate(control: AbstractControl): ValidationErrors {
        if (!control.parent) {
            return null;
        }
        if (!thisDateControl) {
            thisDateControl = control;
            otherDateControl = control.parent.get(dateCompareControlName) as AbstractControl;
            if (!otherDateControl) {
                throw new Error('dateLessThanOrEqualsValidator(): other control is not found in parent group');
            }
            otherDateControl.valueChanges.subscribe(() => {
                thisDateControl.updateValueAndValidity();
            });
        }
        if (!otherDateControl || !otherDateControl.value) {
            return null;
        }
        const date1 = thisDateControl.value;
        const date2 = otherDateControl.value;
        if (date1 !== null && date2 !== null && date1 > date2) {
            return {
                'date_less_than_or_equal': true
            };
        }
        return null;
    };
}

并使用它：

    this.myForm = new FormGroup({
      'startDate': new FormControl('', [Validators.required, DateLessThanOrEqualsValidator('endDate')]), // must be same "endDate"
      'endDate': new FormControl('', [Validators.required]),
    });

每次startDate > endDate，myForm将无效

演示here

在Angular中验证startDate endDate

2 个答案: