TypeError: this._chipGrid.registerInput is not a function error in Console after updating the material version 15.x.x

Question

I've update my Angular to version 15.2.1 using the saem material version as 15.2.1. Here is the code which I was using

<mat-form-field  class="example-chip-list">
        <mat-chip-listbox #chipList>
            <mat-chip-option *ngFor="let tag of formTags.tags" [selectable]="selectable"
                      [removable]="removable" (removed)="removeTag(tag)">
                {{tag.name}}
                <mat-icon matChipRemove *ngIf="removable">cancel</mat-icon>
            </mat-chip-option>
            <input matInput  [disabled]="preDefined" type="" placeholder={{tagPlaceHolderText}}
                   [matChipInputFor]="chipList"
                   [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
                   [matChipInputAddOnBlur]="addOnBlur"
                   (matChipInputTokenEnd)="addTag($event)">
        </mat-chip-listbox>
</mat-form-field>

Note : earlier I was using the with but after Updating to angular version 15 I've changed it with with .

Is there any way to resolve this this._chipGrid.registerInput error in console

Answer 1

Just encountered the same issue and I believe it's due to the fact that I have only carried out a partial migration from my previous Material version to v15.

I gave up trying to fix the issue for now. When I have time to complete the migration I anticipate the issue will resolve.

I replaced my chips with a mat-table. For my use case a selection column worked well to replace the functionality of adding and removing the chips.

Your use case may not work with this solution, but I hope this answer helps at least a little :-)

Answer 2

I had the same issue, I solved it by renaming mat-chip-listbox to mat-chip-grid and mat-chip-option to mat-chip-row. You can see documentation https://material.angular.io/components/chips/overview

Answer 3

You are using a input connected to the chip, in that case use <mat-chip-grid> and <mat-chip-row> for assisting users with text entry, instead of <mat-chip-listbox> and <mat-chip-option>.

Hence replace <mat-chip-listbox> with <mat-chip-grid> and <mat-chip-option> with <mat-chip-row> as shown below:

<mat-form-field  class="example-chip-list">
        <mat-chip-grid #chipList>
            <mat-chip-row *ngFor="let tag of formTags.tags" [selectable]="selectable"
                      [removable]="removable" (removed)="removeTag(tag)">
                {{tag.name}}
                <mat-icon matChipRemove *ngIf="removable">cancel</mat-icon>
            </mat-chip-row>
            <input matInput  [disabled]="preDefined" type="" placeholder={{tagPlaceHolderText}}
                   [matChipInputFor]="chipList"
                   [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
                   [matChipInputAddOnBlur]="addOnBlur"
                   (matChipInputTokenEnd)="addTag($event)">
        </mat-chip-grid>
</mat-form-field>

Refer: https://material.angular.io/components/chips/overview#chips-connected-to-an-input-field