Как связать mat-chip с ngmodel в Angular 6 с помощью Material - PullRequest
Новая
       47

Как связать mat-chip с ngmodel в Angular 6 с помощью Material

0 голосов
/ 26 июня 2018

У меня есть форма в диалоговом окне, которая отображает несколько полей. Большинство из них являются входными данными и отлично работают, они связаны с [(ngModel)], как показано ниже, но я бы хотел поле с mat-chip и autocomplete (например, здесь ). Моя проблема в том, что я не знаю, как связать выбранные чипы с помощью [(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);
}

Просмотр моей заполненной формы

Когда я нажимаю на кнопку «Добавить», мой элемент добавляется со всеми другими полями, но поле «движенияIds» равно нулю, как мы видим в консоли .

Заранее благодарим вас за любую помощь, которую вы можете оказать мне.

1 Ответ

0 голосов
/ 27 июня 2018

Для тех, у кого может быть такая же проблема, я нашел решение.

Вместо того, чтобы связывать список чипов с моими «data.movementsIds» с помощью [(ngModel)], я просто передаю массив «mouvs» в мою функцию «verifyAdd», а затем устанавливаю 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);
}
...