how to fix can't bind to formControl error

Question

can anybody help me out on why it saying " Can't bind to 'formControl' since it isn't a known property of 'input'." even though I already imported in my modules and also I have another component that using either FormControl, FormGroup or both but it didn't give me this kind of error over there but this one did. I'm not really sure why I keep getting this error.

I already imported ReactiveFormsModule in app.module.ts file. I can use formControl in other component but not sure why I can't use in this component.

HTML

<div class="component">
    <mat-chip-list *ngIf="editMode" #chipList >
         <div>
            <mat-chip> </mat-chip>
         <div>
            <div >
                <input matInput  #input  [formControl]="tagCtrl2"  [(ngModel)]="tagIn"  placeholder="Select or Create a tag" [matAutocomplete]="auto"
                    (focusout)="hideTagInput()" (keyup.enter)="addTag()"(keyup.escape)="hideTagInput()"
                    (keydown.backspace)="$event.stopPropagation();" (keydown.space)="$event.stopPropagation();" [matChipInputFor]="chipList" />
            </div>

            <mat-autocomplete #auto="matAutocomplete" (optionSelected)="selected($event)">
                <mat-option *ngFor="let tag of filteredTags | async" [value]="tag">
                    {{tag}}
                </mat-option>
            </mat-autocomplete>

    <mat-chip-list>
</div>

TS

import { FormControl } from '@angular/forms';

export class TagsComponent implements OnInit {
   tagCtrl2 = new FormControl();

Answer 1

in your module file you should add this ReactiveFormsModule to your module file like this:

import { ReactiveFormsModule } from '@angular/forms';

@NgModule({
  imports: [
    ReactiveFormsModule
  ]
})
export class CommonModule {}