如何在 Angular 6 中使用 Material 将 mat-chip 绑定到 ngmodel

Posted 2023-02-22

【中文标题】如何在 Angular 6 中使用 Material 将 mat-chip 绑定到 ngmodel

【英文标题】：How to bind mat-chip to ngmodel in Angular 6 with Material

【发布时间】：2018-12-05 07:47:55

【问题描述】：

我在 mat-dialog 中有一个显示多个字段的表单。它们中的大多数都是输入并完美地工作，它们与 [(ngModel)] 绑定，如下所示，但我想要一个带有 mat-chips 和自动完成的字段（如here）。我的问题是不知道如何将选中的芯片与[(ngModel)]绑定获取数据。

我的html：

<form class="mat-dialog-content" (ngSubmit)="submit" #formControl="ngForm">
<div class="form">
  <mat-form-field color="accent">
    <input matInput #inputname class="form-control" placeholder="Nom du WOD" [(ngModel)]="data.name" name="name" maxlength="50" required >
    <mat-error *ngIf="formControl.invalid">getErrorMessage()</mat-error>
    <mat-hint align="end">inputname.value?.length || 0/50</mat-hint>
  </mat-form-field>
</div>

<div class="form">
  <mat-form-field color="accent">
    <input matInput placeholder="Notes du coach" [(ngModel)]="data.coachesNotes" name="coachesNotes">
  </mat-form-field>
</div>

<div class="form">
  <mat-form-field class="chip-list" aria-orientation="horizontal">
    <mat-chip-list #chipList [(ngModel)]="data.movementsIds" name="movementsIds">
      <mat-chip
        *ngFor="let mouv of mouvs"
        [selectable]="selectable"
        [removable]="removable"
        (removed)="remove(mouv)">
        mouv
        <mat-icon matChipRemove *ngIf="removable">cancel</mat-icon>
      </mat-chip>
      <input
        placeholder="Ajouter un mouvement..."
        #mouvInput
        [formControl]="mouvCtrl"
        [matAutocomplete]="auto"
        [matChipInputFor]="chipList"
        [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
        [matChipInputAddOnBlur]="addOnBlur"
        (matChipInputTokenEnd)="add($event)"
      />
    </mat-chip-list>
    <mat-autocomplete #auto="matAutocomplete" (optionSelected)="selectedChip($event)">
      <mat-option *ngFor="let mouv of filteredMouvs | async" [value]="mouv">
         mouv 
      </mat-option>
    </mat-autocomplete>
  </mat-form-field>
</div>

<div mat-dialog-actions>
  <button mat-button [type]="submit" [disabled]="!formControl.valid" [mat-dialog-close]="1" (click)="confirmAdd()">Ajouter</button>
  <button mat-button (click)="onNoClick()" tabindex="-1">Annuler</button>
</div></form>

我的组件：

public confirmAdd(): void 
  this.dataService.addWod(this.data);

View of my filled form

当我点击“添加”按钮时，我的项目与所有其他字段一起添加，但“movementsIds”字段为空，我们可以看到in the console。

提前感谢您能给我带来的任何帮助。

【参考方案1】：

对于那些可能有同样问题的人，我已经找到了解决方案。

我没有使用 [(ngModel)] 将芯片列表绑定到我的“data.movementsIds”，而是将“mouvs”数组传递给我的“confirmAdd”函数，然后使用这个数组设置 data.movementsIds，如下所示：

HTML：

  <mat-form-field class="chip-list" aria-orientation="horizontal">
    <mat-chip-list #chipList>
      <mat-chip
        *ngFor="let mouv of mouvs"
        [removable]="removable"
        (removed)="remove(mouv)">
        mouv
        <mat-icon matChipRemove *ngIf="removable">cancel</mat-icon>
      </mat-chip>
      <input
        placeholder="Ajouter un mouvement..."
        #mouvInput
        [formControl]="movementsIds"
        [matAutocomplete]="auto"
        [matChipInputFor]="chipList"
        [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
        [matChipInputAddOnBlur]="addOnBlur"
        (matChipInputTokenEnd)="add($event)"/>
    </mat-chip-list>
    <mat-autocomplete #auto="matAutocomplete" (optionSelected)="selectedChip($event)">
      <mat-option *ngFor="let mouv of filteredMouvs | async" [value]="mouv">
         mouv 
      </mat-option>
    </mat-autocomplete>
  </mat-form-field>

组件：

public confirmAdd(mouvs: Array<any>): void 
   this.data.movementsIds = JSON.stringify(mouvs);
   this.dataService.addWod(this.data);

【讨论】：

您能否在在线编辑器中提供您的演示项目链接。谢谢

@samhot 如果没有 ngModel，模板驱动的表单验证将不起作用