title: Start Date and End Date validator not displaying the error message
body: <p>In Angular-13, I have this start date and end date comparison validator:</p>
  <p>date-comparison-validator:</p>
  <pre><code>import { AbstractControl, ValidationErrors, Validators } from '@angular/forms';
  
  export function DateComparisonValidator(dateCompareControlName: string) {
  
      let thisDateControl: AbstractControl;
      let otherDateControl: AbstractControl;
  
      return function DateComparisonValidator(control: AbstractControl): ValidationErrors | null {
          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(() =&gt; {
                  thisDateControl.updateValueAndValidity();
              });
          }
          if (!otherDateControl || !otherDateControl.value) {
              return null;
          }
          const date1 = thisDateControl.value;
          const date2 = otherDateControl.value;
          if (date1 !== null &amp;&amp; date2 !== null &amp;&amp; date1 &gt; date2) {
              return {
                  'date_less_than_or_equal': true
              };
          }
          return null;
      };
  }
  </code></pre>
  <p>So I imported it into the typescript.</p>
  <p>contract.component.ts:</p>
  <pre><code>import { DateComparisonValidator } from 'src/app/shared/validators/date-comparison-validator';
  
    createContract() {
      this.createContractForm = this.fb.group({
        startDate: ['', [Validators.required, DateComparisonValidator('endDate')]],
        endDate: ['', [Validators.required]],
        amount:['', [Validators.required, RxwebValidators.numeric({acceptValue:NumericValueType.PositiveNumber,allowDecimal:true })]]
      });
    }
  
    ngOnInit(): void {
      this.createContract();
    }
  
    createValidate() {
      if (!this.createContractForm.valid) {
        this.createContractForm.markAllAsTouched();
        return;
      }
    }
    get fc() {
      return this.createContractForm.controls;
    };
  </code></pre>
  <p>contract.component.html:</p>
  <pre><code>&lt;div class=&quot;row&quot;&gt;
    &lt;div class=&quot;col-md-6&quot;&gt;
      &lt;div class=&quot;form-group&quot;&gt;
        &lt;label for=&quot;startDate&quot;&gt;Start Date&lt;/label&gt;
        &lt;div class=&quot;input-group&quot;&gt;
          &lt;div class=&quot;input-group-prepend&quot;&gt;
            &lt;span class=&quot;input-group-text&quot;&gt;&lt;i class=&quot;far fa-calendar-alt&quot;&gt;&lt;/i&gt;&lt;/span&gt;
          &lt;/div&gt;
          &lt;input type=&quot;text&quot;
          placeholder=&quot;DD-MM-YYYY&quot;
          class=&quot;form-control&quot;
          formControlName='startDate'
          bsDatepicker
          [bsConfig]=&quot;{ isAnimated: true, dateInputFormat: 'DD-MM-YYYY', returnFocusToInput: true, showClearButton: true, clearPosition: 'right' }&quot;&gt;
        &lt;/div&gt;
        &lt;div *ngIf=&quot;fc['startDate'].touched &amp;&amp; fc['startDate'].invalid&quot; class=&quot;alert alert-danger&quot;&gt;
          &lt;div *ngIf=&quot;fc['startDate'].errors &amp;&amp; fc['startDate'].errors['required']&quot;&gt;Start Date field is required!&lt;/div&gt;
          &lt;div *ngIf=&quot;fc['startDate'].errors &amp;&amp; fc['startDate'].errors['DateComparisonValidator']&quot;&gt;Start Date must be less than End Date!&lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class=&quot;col-md-6&quot;&gt;
      &lt;div class=&quot;form-group&quot;&gt;
        &lt;label for=&quot;endDate&quot;&gt;End Date&lt;span style=&quot;color:red;&quot;&gt;*&lt;/span&gt;&lt;/label&gt;
        &lt;div class=&quot;input-group&quot;&gt;
          &lt;div class=&quot;input-group-prepend&quot;&gt;
            &lt;span class=&quot;input-group-text&quot;&gt;&lt;i class=&quot;far fa-calendar-alt&quot;&gt;&lt;/i&gt;&lt;/span&gt;
          &lt;/div&gt;
          &lt;input type=&quot;text&quot;
          placeholder=&quot;DD-MM-YYYY&quot;
          class=&quot;form-control&quot;
          formControlName='endDate'
          bsDatepicker
          [bsConfig]=&quot;{ isAnimated: true, dateInputFormat: 'DD-MM-YYYY', returnFocusToInput: true, showClearButton: true, clearPosition: 'right' }&quot;&gt;
        &lt;/div&gt;
        &lt;div *ngIf=&quot;fc['endDate'].touched &amp;&amp; fc['endDate'].invalid&quot; class=&quot;alert alert-danger&quot;&gt;
          &lt;div *ngIf=&quot;fc['endDate'].errors &amp;&amp; fc['endDate'].errors['required']&quot;&gt;End Date field is required!&lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
    
  <p>I am using ngx-bootstrap-datepicker.</p>
  <p>Using DateComparisonValidator, if StartDate is greater than EndDate, I expected to see this message: &quot;Start Date must be less than End Date!&quot;, but it just turns red without any message.</p>
  <p>All other validators are working as expected apart from this.</p>
  <p>How do I get this corrected?</p>