web-dev-qa-db-fra.com

Présélection de plusieurs valeurs pour mat-select - Angular 6

J'essaie de présélectionner plusieurs options dans une sélection de tapis. Jusqu'à présent, je ne suis pas en mesure d'y parvenir.

Voici le fichier HTML:

<mat-dialog-content [formGroup]="form">
   <mat-form-field>
     <mat-select placeholder="participants" formControlName="participants"  multiple>
         <mat-option *ngFor="let participant of participants" [value]="participant">{{participant}}</mat-option>
     </mat-select>
    </mat-form-field>
</mat-dialog-content>

Voici le contrôleur:

export class EventViewModalComponent implements OnInit {
  form: FormGroup;
  calendarEvent: CalendarEvent;
  participants = [];

  constructor(private fb: FormBuilder,
    private participantService: ParticipantService,
    @Inject(MAT_DIALOG_DATA) event: CalendarEvent) 
    { 
    this.form = fb.group({
      title: [event.title, Validators.required],
      location: [event.meta.location, Validators.required],
      description: [event.meta.description, Validators.required],
      start: [event.start, Validators.required],
      end: [event.end, Validators.required],
      participants: [this.participants, Validators.required]
    });
    this.calendarEvent = event;
  }

  ngOnInit() {
    this.participantService.getAll().subscribe(data =>{
      for(let i = 0; i < data['length']; i++){
        this.participants.Push(data[i]['name']);
      }
    })
  }
}

Cela sélectionne actuellement toutes les valeurs par défaut. Voici une capture d'écran de son apparence actuelle: enter image description here

Ce que j'essaie de réaliser, c'est d'avoir seulement Cindy et Jim présélectionnés comme ceci:

enter image description here

Comment puis-je atteindre cet objectif? J'ai lu plusieurs SO questions et je n'ai pas réussi. Toute aide est appréciée

htmlangulartypescriptangular-material
6
Rana

Je crois que le moyen le plus simple est d'utiliser la directive [(ngModel)] (ou une liaison unidirectionnelle, je la couvrirai plus tard) pour manipuler la valeur de mat-select: Vous pouvez lier une variable , qui contient les éléments que vous souhaitez présélectionner, quelque chose comme ceci:

<mat-select placeholder="participants" formControlName="participants" multiple [(ngModel)]="selection">
  <mat-option *ngFor="let participant of participants" [value]="participant">{{participant}}</mat-option>
</mat-select>

Et puis vous pouvez simplement filtrer votre tableau initial d'éléments et obtenir uniquement ceux que vous souhaitez sélectionner par défaut (il doit être stocké dans la propriété de classe selection dans le cas fourni).

J'ai créé un [~ # ~] stackblitz [~ # ~] pour démontrer que c'est possible. Dans cet exemple, je filtre les éléments à des index pairs, et finalement nous obtenons "1'st, 3'rd, 5'th, ..." éléments sélectionnés.

Notez que vous pouvez diviser [(ngModel)] en 2 directives distinctes si vous souhaitez utiliser uniquement une liaison unidirectionnelle: [ngModel] Ou (ngModelChange). Pour plus d'informations, jetez un œil à guide de syntaxe des modèles angulaires .

2
Commercial Suicide

Avec Angular6 +, il y a un avertissement de dépréciation lorsque vous avez à la fois un formControl et [(ngModel)]

Il semble que vous utilisiez ngModel sur le même champ de formulaire que formControl. La prise en charge de l'utilisation de la propriété d'entrée ngModel et de l'événement ngModelChange avec des directives de formulaire réactives a été déconseillée dans Angular v6 et sera supprimée dans Angular v7.

Option 1 en utilisant [ngModel] sans FormControl

Comme la première réponse le suggère, séparez [ngModel] et (ngModelChange) comme ceci.

<mat-select 
  [ngModel]="selectedFoods" 
  (ngModelChange)="selectedFoods" 
  placeholder="Favorite food" multiple>
  <mat-option *ngFor="let food of allfoods" [value]="food.value">
      {{food.viewValue}}
  </mat-option>
</mat-select>

Et pour les ts.

  allfoods: Food[] = [
    {value: 'steak-0', viewValue: 'Steak'},
    {value: 'pizza-1', viewValue: 'Pizza'},
    {value: 'tacos-2', viewValue: 'Tacos'},
    {value: 'pasta-3', viewValue: 'Pasta'}
  ];
  selectedFoods = [
     'steak-0', 'pasta-3'
  ];

https://stackblitz.com/edit/angular-mat-select-with-ngmodel?embed=1&file=app/select-overview-example.ts

Option 2 en utilisant [formControl] sans [ngModel] 

<mat-form-field>
    <mat-select [formControl]="foodForm" placeholder="Favorite food" multiple>
        <mat-option *ngFor="let food of allfoods" [value]="food.value">
            {{food.viewValue}}
        </mat-option>
    </mat-select>
</mat-form-field>

Dans ce cas, la sélection est initialisée dans le constructeur de FormControl.

 allfoods: Food[] = [
    {value: 'steak-0', viewValue: 'Steak'},
    {value: 'pizza-1', viewValue: 'Pizza'},
    {value: 'tacos-2', viewValue: 'Tacos'},
    {value: 'pasta-3', viewValue: 'Pasta'}
    ];
 myselectedFoods = ['pasta-3', 'steak-0'];
 foodForm: FormControl = new FormControl(this.myselectedFoods);

https://stackblitz.com/edit/angular-mat-select-multi-with-formcontrol

6
intotecho