Ошибка пользовательского валидатора Angular 7 отражается не сразу

Question

Я реализую ControlValueAccessor для моего компонента, и у меня есть несколько диапазонов дат внутри формы, которые можно изменить.

Я создал собственный валидатор, который проверяет наличие совпадений между диапазонами дат:

test.component.html

<ng-container *ngIf="value as v">
  <form  rangeValidator [ranges]="v.ranges"  #dateForm="ngForm" >
   <div  *ngFor="let x of v.ranges;let index = index;trackBy:trackIndex;">
        <input type="date" [(ngModel)]="x.start" #start='ngModel' name="start-{{index}}">
        <input type="date" [(ngModel)]="x.end" #end='ngModel' name="end-{{index}}">
        <button (click)="removeRange(index)">
          <mat-icon>delete</mat-icon>
        </button>
    </div>
</form>
</ng-container>

test.component.ts

@ViewChild('dateForm') dateForm;
@Output('onValidChange') onValidChange: EventEmitter<boolean | Boolean> = new EventEmitter<boolean | Boolean>();

writeValue(obj): void {
    this.value = obj;
  }

  onChange = (_) => { };
  onTouched = () => { };
  registerOnChange(fn: (_: any) => void): void { this.onChange = fn; }
  registerOnTouched(fn: () => void): void { this.onTouched = fn; }


  private _value= {};
  public get value(){
    if (this.dateForm!== undefined){
      this.dateForm.valueChanges.subscribe(values => {
        this.onValidChange.next(this.dateForm.valid);
// this is emitting validity to the parent component, which then disables the submit button based on it.
      })
  } 
    return this._value;
  }
  public set value(v) {
    this._value = v;
    this.onChange(v);
  }

dateRange.validator.directive.ts

import {  NG_VALIDATORS, Validator, AbstractControl } from '@angular/forms';   

   import { Directive, Input } from '@angular/core';
@Directive({  
  selector: '[rangeValidator]',  
  providers: [  
   {  
    provide: NG_VALIDATORS,  
    useExisting: RangeValidator,  
    multi: true  
   }  
  ]  
 })

 export class RangeValidator implements Validator {
    @Input() ranges;
    public constructor() {}

    validate(formGroup): {  } | null {
          //code to perform overlapping logic
          if (overlapped) {
            return {
               overlapping: true
           }
          } else {
            return null;
          }
         }
       }
      }  

Логика валидации работает нормально, но валидность отражается на основе предыдущего значения формы. Например, если я ввел перекрывающиеся значения, форма остается действительной, а затем я удаляю перекрытие, форма становится недействительной. Даже если этот валидатор получает самое последнее значение. Любая идея, почему она не отражает правильную действительность сразу?