Recently, I upgraded my Angular app from version 11 to 12 along with all the dependencies, including Angular Material. However, after running 'ng serve', I encountered the following error:
Error: src/app/components/chips/chips.component.html:19:17 - error NG8002: Can't bind to 'formControl' since it isn't a known property of 'input'.
19 [formControl]="itemCtrl"
~~~~~~~~~~~~~~~~~~~~~~~~
Below are the contents of my chips.component.ts and chips.component.html files:
import {BaseComponentComponent} from '../basecomponent.component';
import {COMMA, ENTER} from '@angular/cdk/keycodes';
import {Component, ElementRef, Input, ViewChild} from '@angular/core';
import {FormControl} from '@angular/forms';
import {MatAutocompleteSelectedEvent, MatAutocompleteModule} from '@angular/material/autocomplete';
import {MatChipInputEvent} from '@angular/material/chips';
import {Observable} from 'rxjs';
import {map, startWith} from 'rxjs/operators';
import {ChipsModel} from '../../models/chips.model';
import {MatInputModule} from '@angular/material/input';
@Component({
selector: 'app-chips',
templateUrl: './chips.component.html',
styleUrls: ['./chips.component.scss']
})
export class ChipsComponent extends BaseComponentComponent {
...
}
<mat-form-field style="width: 100%;">
<input
#itemInput
[formControl]="itemCtrl"
[matAutocomplete]="auto"
[matChipInputFor]="chipList"
[matChipInputSeparatorKeyCodes]="separatorKeysCodes"
(matChipInputTokenEnd)="add($event)"
title="">
</mat-form-field>
I have attempted various fixes suggested in similar StackOverflow posts, such as importing additional modules into a custom module that is imported in app.module.ts:
import { MatTableModule } from '@angular/material/table';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MatInputModule } from '@angular/material/input';
import { MatFormFieldModule } from '@angular/material/form-field';
@NgModule({
imports : [
MatInputModule,
MatTableModule,
FormsModule,
ReactiveFormsModule,
MatFormFieldModule
],
exports: [
MatInputModule,
MatTableModule,
FormsModule,
ReactiveFormsModule,
MatFormFieldModule
]})
export class MaterialModule {}
Despite importing the ChipsComponent class in app.module.ts and declaring it within the NgModule, the error persists. Any insights on what might be causing this issue?