title: error TS2739: Type 'AbstractControl' is missing the following properties from type 'FormControl': registerOnChange, registerOnDisabledChange
body: <p>I am a newbie in Angular and following an online course using <em>Angular 10</em> but stuck at one point. I am trying to implement the <strong>Reactive forms</strong>.
  For that, I have added a new component <em>text-input</em>. The code for the <code>text-input.component.ts</code> is as follows:</p>
  <pre><code>import { Component, Input, Self } from '@angular/core';
  import { ControlValueAccessor, NgControl } from '@angular/forms';
  
  @Component({
    selector: 'app-text-input',
    templateUrl: './text-input.component.html',
    styleUrls: ['./text-input.component.css']
  })
  // We need to implement a control value accessor
  export class TextInputComponent implements ControlValueAccessor {
    @Input() label: string;
    @Input() type = 'text';
  
    constructor(@Self() public ngControl: NgControl) {
      this.ngControl.valueAccessor = this;
    }
    writeValue(obj: any): void {
    }
  
    registerOnChange(fn: any): void {
    }
  
    registerOnTouched(fn: any): void {
    }
  }
  </code></pre>
  <p>Here is the code for the <code>text-input.component.html</code></p>
  <pre><code>&lt;div class=&quot;form-group&quot;&gt;
      &lt;input [class.is-invalid]=&quot;ngControl.touched &amp;&amp; ngControl.invalid&quot; type=&quot;{{type}}&quot; 
      class=&quot;form-control&quot;
      [formControl]=&quot;ngControl.control&quot; placeholder=&quot;{{label}}&quot;&gt;
  
      &lt;div *ngIf='ngControl.control.errors?.required' class=&quot;invalid-feedback&quot;&gt;Please enter a {{label}}&lt;/div&gt;
      &lt;div *ngIf='ngControl.control.errors?.minlength' 
      class=&quot;invalid-feedback&quot;&gt;{{label}} must be at least {{ngControl.control.errors.minlength['requiredLength']}}&lt;/div&gt;
  
      &lt;div *ngIf='ngControl.control.errors?.maxlength' class=&quot;invalid-feedback&quot;&gt;{{label}} must be at most {{ngControl.control.errors.maxlength['requiredLength']}}&lt;/div&gt;
  
      &lt;div *ngIf='ngControl.control.errors?.isMatching' class=&quot;invalid-feedback&quot;&gt;
          Password do not match&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>But as soon as I add the code <code>[formControl]</code> I start getting the error:</p>
  <pre><code> Type 'AbstractControl' is missing the following properties from type 'FormControl': registerOnChange, registerOnDisabledChange, _applyFormState
  
  4     [formControl]=&quot;ngControl.control&quot; placeholder=&quot;{{label}}&quot;&gt;
        ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
  
    src/app/_forms/text-input/text-input.component.ts:6:16
      6   templateUrl: './text-input.component.html',
                       ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
      Error occurs in the template of component TextInputComponent.
  </code></pre>
  <p>The course Instructor is trying to generate the input controls inside a register component using this component, the code looks like this in <code>register.component.html</code></p>
  <pre><code>&lt;form [formGroup]=&quot;registerForm&quot; (ngSubmit)=&quot;register()&quot; autocomplete=&quot;off&quot;&gt;
      &lt;h2 class=&quot;text-center text-primary&quot;&gt;Sign up&lt;/h2&gt;
      &lt;hr&gt;
      &lt;app-text-input [formControl]='registerForm.controls[&quot;username&quot;]' [label]='&quot;Username&quot;'&gt;&lt;/app-text-input&gt;
  
  
  
      &lt;div class=&quot;form-group text-center&quot;&gt;
          &lt;button class=&quot;btn btn-dark mr-2&quot; type=&quot;submit&quot;&gt;Register&lt;/button&gt;
          &lt;button class=&quot;btn btn-success mr-2&quot; (click)=&quot;cancel()&quot; type=&quot;button&quot;&gt;Cancel&lt;/button&gt;
      &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
  <p>And there is a glimpse of <code>register.component.ts</code></p>
  <pre><code>import { Component, EventEmitter, OnInit, Output } from '@angular/core';
  import { AbstractControl, FormBuilder, FormControl, FormGroup, ValidatorFn, Validators } from '@angular/forms';
  import { ToastrService } from 'ngx-toastr';
  import { AccountService } from '../_services/account.service';
  
  @Component({
    selector: 'app-register',
    templateUrl: './register.component.html',
    styleUrls: ['./register.component.css']
  })
  export class RegisterComponent implements OnInit {
    @Output() cancelRegister = new EventEmitter();
    model: any = {};
    registerForm: FormGroup;
    constructor(private accountService: AccountService, private toastr: ToastrService, private fb: FormBuilder) { }
  
    ngOnInit(): void {
      this.intitializeForm();
    }
    intitializeForm() {
      this.registerForm = this.fb.group({
        username: ['', Validators.required]
        
      })
    } 
    register = () =&gt; {
      console.log(this.registerForm.value);
     
    }  
  }
  </code></pre>
  <p>Please do let me know what else you need, being new to Angular I am not able to find the route cause, but if you help me out then I shall move further with my course and would really thankful.</p>