Angular 6 ng build --prod error Argument of type 'AbstractControl' is not assignable to parameter of type 'FormControl'?

Question

Angular

Hello. There is a simple form that angular cli swears at

<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 --prodError when executing command

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'.

Location in html points exactly to the first parenthesis

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

Here is the directive that is swearing at, and in it the eventonDebounce

Directive

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();
  }
}

I can't figure out what is required of me.

Answer 1

Make a getter in the component

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

And use it in yours There are other options, some make a wrapper and use it in the template(click)="setErrorMessage(formResendEmail)"

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

or just that setErrorMessage accepts an AbstractControl as input
. But in general, this is a problem of reactive forms - bad typing. get or controls return an AbstractControl, and you have to cast each time.