Angular 6 ng build --prod ошибка Argument of type 'AbstractControl' is not assignable to parameter of type 'FormControl'?

Question

[WhatIsHTML]

Всем привет. Есть простая форма, на которую ругается angular cli

<form [formGroup]="formResend" (ngSubmit)="forgot()" class="form">
          <input type="email" formControlName="email" [(ngModel)]="model.email" appDebounce (onDebounce)="setErrorMessage(formResend.controls['email'])" placeholder="Email">

        <button type="submit" [disabled]="!formResend.valid" >Submit</button>
      </form>

При выполнении команды ng build --prod вылетает ошибка

ERROR in src\app\signin\signin.component.html(14,92): : Argument of type 'AbstractControl' is not assignable to parameter of type 'FormControl'.
  Property 'registerOnChange' is missing in type 'AbstractControl'.
src\app\signin\signin.component.html(21,102): : Argument of type 'AbstractControl' is not assignable to parameter of type 'FormControl'.

Местоположение в html указывает точно на первую скобку

(onDebounce)="setErrorMessage(formResend.controls['email'])"

Вот директива, на которую ругается, и в ней событие onDebounce

Директива

import { Directive, Input, Output, EventEmitter, OnInit, OnDestroy } from '@angular/core';
import { NgControl } from '@angular/forms';
import { Subject } from 'rxjs';
import 'rxjs/add/operator/debounceTime';
import 'rxjs/add/operator/distinctUntilChanged';
import 'rxjs/add/operator/takeUntil';

@Directive({
  selector: '[ngModel][appDebounce]'
})
export class DebounceDirective implements OnInit, OnDestroy {

  @Output()
  public onDebounce = new EventEmitter<any>();

  @Input('debounce')
  public debounceTime: number = 500;

  private ngUnsubscribe: Subject<void> = new Subject<void>();

  constructor(public model: NgControl) {
  }

  ngOnInit() {
    this.model.valueChanges
      .takeUntil(this.ngUnsubscribe)
      .debounceTime(this.debounceTime)
      .distinctUntilChanged()
      .subscribe(modelValue => {
        this.onDebounce.emit(modelValue);
      });
  }

  ngOnDestroy() {
    this.ngUnsubscribe.next();
    this.ngUnsubscribe.complete();
  }
}

Я не могу понять что от меня требуется.

Answer 1

[Антон Швец]

В компоненте сделайте геттер

get formResendEmail() {
  return formResend.controls['email'] as FormControl
}

И используйте его в вашей (click)="setErrorMessage(formResendEmail)"

Есть и другие варианты, некоторые делают обертку и используют ее в шаблоне

public toFormControl(point: AbstractControl): FormControl {
  return point as FormControl;
}

или просто чтобы setErrorMessage принимала на вход AbstractControl

Но вообще это проблема реактивных форм - плохая типизация. get или controls возвращают AbstractControl, и приходится каждый раз приводить типы.