升级Angular Material 15后出现this._chipGrid.registerInput错误如何解决？

你遇到的TypeError: this._chipGrid.registerInput is not a function错误，核心原因是**matChipInputFor指令只能和mat-chip-list配合使用**，而你用了mat-chip-listbox——这个组件是专门用于单选/多选的芯片选择场景，本身不支持输入添加芯片的功能，自然没有registerInput方法。

解决步骤如下：

• 把模板中的<mat-chip-listbox>替换为<mat-chip-list>，同时保留#chipList模板变量，因为matChipInputFor需要绑定到mat-chip-list实例：

  <mat-form-field class="example-chip-list">
      <mat-chip-list #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-list>
  </mat-form-field>
  

• 确认你的模块中已经导入了所有必需的Angular Material模块：

  import { MatChipsModule } from '@angular/material/chips';
  import { MatFormFieldModule } from '@angular/material/form-field';
  import { MatInputModule } from '@angular/material/input';
  import { MatIconModule } from '@angular/material/icon';
  
  @NgModule({
    imports: [
      // ...其他模块
      MatChipsModule,
      MatFormFieldModule,
      MatInputModule,
      MatIconModule
    ]
  })
  export class YourModule { }
  

如果你的需求确实需要芯片可选择（单选/多选），同时支持输入添加，上面的修改完全可以满足——mat-chip-list配合mat-chip-option就能实现可选功能，而输入框的逻辑也能正常工作。

内容的提问来源于stack exchange，提问作者Rahul Mallah