Question

我编写了一个自定义日期验证器指令，允许我比较两个日期输入字段（已授予，任何数据类型都应存在此问题）。验证器有两个输入，其中一个是要与之比较的目标控件。

除了在用户更新“targetDate”控件时验证始终是一键按下的事实之外，一切都有效。 “sourceDate”控件的行为符合预期。例如，用户在sourceDate控件中输入日期，例如2/7/2018。将出现验证消息，告知用户sourceDate必须小于或等于targetDate。用户将targetDate控件更新为大于sourceDate的日期，比如2/8/2018，但sourceDate上的验证错误消息仍然存在。用户再键入一个数字，使目标日期条目显示为2/8/20188，验证消息消失。用户点击退格键将目标日期更改回2/8/2018，验证消息仍然隐藏。因此，似乎验证检查始终是targetDate控件背后的关键压力。同样，sourceDate控件的行为不是这样的。

以下是代码示例：

模板表单

<my-date-picker name="sourceDate"
                myDateComparerValidator="<=" [compareTo]="targetDate"
                [(ngModel)]="sourceDate"
                #sourceDate="ngModel">
</my-date-picker>
<my-validate-message *ngIf="sourceDate.errors?.ltet"
                     message="Source Date must be Less Than or Equal To Target Date">
</my-validate-message>    

<my-date-picker name="targetDate"
                [(ngModel)]="targetDate"
                #targetDate="ngModel">
</my-date-picker>

验证者指令：

@Directive({
    selector: '[myDateComparerValidator]',
    providers: [
        {provide: NG_VALIDATORS, multi: true, useExisting: DateComparerValidatorDirective}
    ]
})
export class DateComparerValidatorDirective implements Validator {
    @Input('myDateComparerValidator')
    operator: string;

    @Input('compareTo')
    compareTo: NgModel;

    validate(c: AbstractControl): ValidationErrors | null {
        const errors: ValidationErrors = {};

        const value: Date = new Date(c.value);
        const compareTo: Date = this.compareTo.model;

        // comparison logic based on operator input //

        return errors;
}

这不可能吗？我是否被迫将这些控件包装成表单组验证（我试图避免这种情况）。

验证始终是一个关键的背后压力

0 个答案: