error TS2742: The inferred type of 'username' cannot be named without a reference to '.../node_modules/@angular/forms/forms'

Issue

forgot-password.component.ts(44,7): error TS2742: The inferred type of 'username' cannot be named without a reference to '.../node_modules/@angular/forms/forms'. This is likely not portable. A type annotation is necessary.

import { Component, Output, EventEmitter } from '@angular/core';
import { Router } from '@angular/router';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
import { User } from '../../models';
import { ValidateUsername } from '../../validators/userid-validator';

@Component({
  selector: 'app-forgot-password',
  templateUrl: './forgot-password.component.html',
  styleUrls: ['./forgot-password.component.scss']
})
export class ForgotPasswordComponent {
  forgotPasswordForm: FormGroup;
  @Output() resetPassword: EventEmitter<any> = new EventEmitter<any>();
  @Output() onSubmit: EventEmitter<User> = new EventEmitter<User>();
  constructor(private formBuilder: FormBuilder, private router: Router) {
    this.forgotPasswordForm = this.formBuilder.group({
      username: ['', [Validators.required, ValidateUsername]]
    });
  }
  get username() { return this.forgotPasswordForm.get('username'); }
  passwordToken(event$) {
    this.onSubmit.emit(event$.value);
  }
}

While running the applicationn, I'm getting error at this line 'get username() { return this.forgotPasswordForm.get('username'); }'

Solution

Should try to have callback type, just like this

 get username(): AbstractControl { 
   return this.forgotPasswordForm.get('username'); 
 }

Answered By - Kumar