vendredi 9 février 2018

get value of material-option angular 5

New to Angular, I'm trying use Angular Material dropdown menu. I want it to display the months but when the user clicks on it I want to get the month's number so I may use it as a url parameter.

My actual html code:

<mat-form-field style="width: 250px;">
     <mat-select placeholder="Sélectionnez un mois" #list [(ngModel)]="selectedOptions" name="selectedOptions" (ngModelChange)="onNgModelChange($event)">
       <mat-option *ngFor="let month of months" (mat-option)="onUpdate($event)" [value]="month.viewValue" >
            
     </mat-option>
    </mat-select>
</mat-form-field>

In my component:

protected months = [
 {value: '0', viewValue: 'Janvier'},
 {value: '1', viewValue: 'Février'},
 {value: '2', viewValue: 'Mars'},
 {value: '3', viewValue: 'Avril'},
 {value: '4', viewValue: 'Mai'},
 {value: '5', viewValue: 'Juin'},
 {value: '6', viewValue: 'Juillet'},
 {value: '7', viewValue: 'Août'},
 {value: '8', viewValue: 'Septembre'},
 {value: '9', viewValue: 'Octobre'},
 {value: '10', viewValue: 'Novembre'},
 {value: '11', viewValue: 'Décembre'}
];

onNgModelChange(event : Event) {
    console.log(event);
}

I can get the viewValue when I click on the select but I'm not succeeding at getting the "value" parameter (the number). How may I manage to get it?

I want for example to get the number "1" when the user clicks on "Février"

Aucun commentaire:

Enregistrer un commentaire