кнопка отправки больше не отключена в angular5

Question

Я работаю с angular5 У меня есть файл .html, который содержит форму с 2 вводами типа даты и текстом ввода типа.

Я реализую условие: если input dateOne больше чемdateДва ошибка появляется для пользователя, иначе он может отправить форму.

Все работает хорошо, кнопка отправки отключена, но когда я выбираю dateOne больше чем dateTwo, появляется сообщение об ошибке, и кнопка больше не отключается.

Кнопка больше не отключается, если первый ввод и обе даты не пусты.он не учитывает условие, которое я сделал в функции validation ().

Это файл .html

 <div class="modal-content">
  <form [formGroup]="form" (ngSubmit)="addProjecToClients()" >
  <div class="modal-header">
    <h4 class="modal-title">Affectation du projet aux clients</h4>
    <button type="button" class="close" (click)="largeModal.hide()" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="modal-body">


    <div class="form-group row">
      <label class="col-sm-5 col-form-label">Choisir un client : </label>


      <div class="col-sm-6">

        <ng-select  *ngIf="_listClients"
                     [items]="_listClients"
                      bindLabel ="nom"
                      bindValue ="id"
                    [(ngModel)]="selectedPersonId"
                    formControlName="selectedPersonId"
        >
        </ng-select>

      </div>
    </div>

    <label class="col-sm-5 col-form-label">Information liées au contrat : </label>
    <div class="form-group row">
      <label class="col-sm-5 col-form-label" >Date One :  </label>
      <div class="col-sm-6">
        <input type="date" class="form-control form-control-sm"
               placeholder=".form-control-sm"  [(ngModel)]="dateOne" formControlName="dateOne">
      </div>
    </div>

    <div class="form-group row">
      <label class="col-sm-5 col-form-label">Date Two : </label>
      <div class="col-sm-6">
        <input type="date"  [(ngModel)]="dateTwo" formControlName="dateTwo"  class="form-control form-control-sm"
               placeholder=".form-control-sm">

        <span style="color:red" *ngIf="validation()">Date fin doit etre plus grand que date debut .</span>

      </div>
    </div>

  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-secondary" (click)="largeModal.hide()">Close</button>
    <button type="submit" class="btn btn-primary" [disabled]="form.invalid">Save changes</button>
  </div>
  </form>
</div><!-- /.modal-content -->

Это файл .ts

export class ProjectsComponent implements OnInit {

  dateOne:new Date() ;
  dateTwo:new Date(); 

  ngOnInit() {      
    this.doSearch();
    this.dateOne= null;
    this.dateTwo= null;

    this.form = this.formBuilder.group({
      dateOne: ['', Validators.required],
      dateTwo: ['', Validators.required],
      selectedPersonId: ['', Validators.required]
    });
  }

  validation(){
    if(this.dateOne && this.dateTwo){
      if(this.dateOne.getTime() < this.dateTwo.getTime()){
        return false;
      }
      else
        return true;
    }

  }

}

Есть идеи?