Angular 6模板驱动的表单跨字段验证清除错误

如何解决Angular 6模板驱动的表单跨字段验证清除错误

内部HTML：

import { Directive,HostListener } from "@angular/core";
import { ValidationErrors,FormGroup,ValidatorFn,NG_VALIDATORS,Validator,AbstractControl } from "@angular/forms";
import { RangeValidator } from "./range-validator";

export const rangeValidator: ValidatorFn = ( formGroup: FormGroup): ValidationErrors | null => {        
    let fromAge = '',toAge = '';
    if(formGroup && formGroup.parent && formGroup.parent.controls && formGroup.parent.controls['ageFrom'] ){
        fromAge = formGroup.parent.controls['ageFrom'];
    }
    if(formGroup && formGroup.parent && formGroup.parent.controls && formGroup.parent.controls['ageto'] ){
        toAge = formGroup.parent.controls['ageto'];
    }
    if ( fromAge !== "" && toAge !== "") {
        const rangeVal: RangeValidator = new RangeValidator();
        const ret = rangeVal.validaterange(fromAge,toAge);
        return ret;
    }
    return null;
};


@Directive({
    selector: '[range-validator]',providers: [{ provide: NG_VALIDATORS,useExisting: RangeValidatorDirective,multi: true }]
})
export class RangeValidatorDirective implements Validator {
    constructor() { }

    @HostListener('change',['$event.target'])
    validate(control: AbstractControl): ValidationErrors {
        return rangeValidator(control);
    }
}

<div>
            <input matInput type="number" 
            minlength="1" 
            maxlength="150" 
            placeholder="From" 
           [(ngModel)]="ageFromInput"  
           name="ageFrom"   required 
           #ageFrom="ngModel" 
           range-validator>                     
            <mat-hint *ngIf="ageFrom.hasError('rangeInvalid')">
              From age should be less than to age
            </mat-hint>    
          </div>
          <div>
            <input matInput type="number" 
            minlength="1" 
            maxlength="150" 
            placeholder="From" 
            [(ngModel)]="ageFromInput"  
            name="ageFrom" 
            required #ageFrom="ngModel"  
            range-validator> 
            <mat-hint *ngIf="!ageFrom['valid'] 
            &&  ageFrom['touched']">
              <p *ngIf="ageFrom.errors?.pattern">
              Please enter a valid From age</p>
            </mat-hint>
          </div>

问题是我使用模板驱动的表单实现了跨字段验证，我有一个输入字段“ From Age”，另一个输入字段“ To Age”，我为这两个输入都应用了属性验证器。该事件按预期触发。但是问题来了。该方案是，如果我输入From Age为15，ToAge为20，并且在我将FromAge编辑为25和ToAge 30之后，则我的自定义验证程序未将FromAge字段设置为有效。除非我再次编辑字段（“从年龄”开始），否则我将无法提交表单。