Как проверить дату в реактивных формах? (Angular)

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormBuilder, Validators, FormControl } from '@angular/forms';

@Component({
  selector: 'app-cpi',
  templateUrl: './cpi.component.html',
  styleUrls: ['./cpi.component.scss']
})
export class MyComponent implements OnInit {

  public myForm: FormGroup;
  private today: Date = new Date();

  get date_cancelled() { return this.myForm.get('date_cancelled').value; }

  constructor(private fb: FormBuilder) {
    this.myForm = this.fb.group({
      emp_cancelled: [''],
      reg_employed: [''],
      date_cancelled: ['', this.dateValidator],
    });
  }

  dateValidator() {
      let from = new Date();
      let to = this.date_cancelled;
      if (from > to) {
        return false;
      }
    return true;

  }

  ngOnInit() {
    
}

}

<section class = "form">
  <form [formGroup] = "myForm">
        <mat-radio-group formControlName = "emp_cancelled">
          <mat-radio-button value = "emp_cancelled">Cancelled</mat-radio-button>
        </mat-radio-group>
        <mat-radio-group formControlName = "reg_employed">
          <mat-radio-button value = "reg_employed">Regularly employed</mat-radio-button>
        </mat-radio-group>
      </div>
      <br />
      <mat-form-field class = "date_cancelled" *ngIf = "myForm.controls.emp_cancelled?.touched">
        <input matInput [matDatepicker] = "picker" placeholder = "Taking effect at" formControlName = "date_cancelled">
        <mat-datepicker-toggle matSuffix [for] = "picker"></mat-datepicker-toggle>
        <mat-datepicker #picker></mat-datepicker>
      </mat-form-field>
      <mat-error *ngIf = "!myForm.controls.date_cancelled?.valid">Error date</mat-error>
      <button type = "submit">Submit</button>
  </form>
</section>