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

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

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

Все работает хорошо, кнопка отправки отключена, но когда я выбираю 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;
    }

  }

}

Любая идея ?