Почему данные из формы не попадают сразу в компонент?

Помогите пожалуйста понять скользкий момент. Я создал реактивную форму, добавил кастомный валидатор, который возвращает промис. Однако чтобы валидация в форме происходила, мне приходится в промис добавлять setTimeout(). Хотелось бы научиться обходиться без подобного костыля.

Здесь есть минимальный пример в песочнице.

Вот код моего компонента:

  currPass: string = '123456';
  form: FormGroup;
  constructor() { }
  ngOnInit() {
    this.form = new FormGroup({
      'currPass':         new FormControl(null, [Validators.required, Validators.minLength(6), Validators.maxLength(10)], this.checkCurrPass.bind(this)),
      'newPass':          new FormControl(null, [Validators.required, Validators.minLength(6), Validators.maxLength(10)])
    });    
  }
  checkCurrPass(control: FormControl): Promise<any> {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        if(this.form.value.currPass === this.currPass) {
          resolve(null);
        } else {
          resolve({checkCurrPass: true});
        } 
      });     
    });
  }
  onSubmit(): void {
    console.log('submit', this.form);
  }

Вот код шаблона:

  <form class="form" [formGroup]="form" (ngSubmit)="onSubmit()">
    <div class="line" [ngClass]="{'error': !form.controls.currPass.valid && form.controls.currPass.dirty}">
      <label for="">Текущий пароль</label>
      <input type="text" formControlName="currPass">
    </div>
    <div class="line" [ngClass]="{'error': !form.controls.newPass.valid && form.controls.newPass.dirty}">
      <label for="">Новый пароль</label>
      <input type="password" formControlName="newPass">
    </div>
    <div class="line">
      <button [disabled]="!form.valid" type="submit">Отправить</button>
    </div>
    <div class="look" (click)="look()">look</div>
  </form>