我在垫对话框中有一个显示多个字段的表单。它们中的大多数都是输入并且可以完美地工作，它们与[（ngModel）]绑定，如下所示，但是我想要一个带有mat-chips和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);
}
当我单击“添加”按钮时，我的项目将与所有其他字段一起添加，但正如我们在控制台中看到的那样，“ movementsIds”字段为null 。
预先感谢您为我带来的任何帮助。
对于那些可能遇到相同问题的人，我已经找到了解决方案。
而不是使用[[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);
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句