How do I bind a Display Value of an Angular-Material Select field to ngModel

Question

I'm pretty new to the Angular development scene and have started with a Simple Taxi Booking Form. I append a Material-Select field with an Array with 2 properties like that:

{value: 24, view: '1010 - Vienna'}

that works well but when I submit the form and check the console.log field zip is equal to 24. How can I achieve, that ngModel binds to the view property of my dropdown?

Thank you very much!

Expected Behavior:

• When I submit the Form via onSubmit(), property zip of the form object should output "1010 - Innere Stadt" and not 24

I want to include that in the Form object ngForm has created, then I could directly send it to my Express API to store it in a Database. Image attached below

Image to Form Object

app.component.html

<form (ngSubmit)="onSubmit(form)" #form="ngForm">

<mat-select placeholder="Postleitzahl" [(ngModel)]="zipValue" name="zip">
    <mat-option *ngFor="let z of zip" [value]="z.value" >{{z.view}} 
    </mat-option>
  </mat-select>

    <button type="submit">submit</button>

</form>

app.component.ts

import { Component, OnInit, OnChanges } from '@angular/core';
import { NgForm } from '@angular/forms';

@Component({
  selector: 'app-form-de',
  templateUrl: './form-de.component.html',
  styleUrls: ['./form-de.component.css']
})


export class FormDeComponent {

zip = [
    { view: '1010 - Innere Stadt', value: 24 },
    { view: '1020 - Leopoldstadt', value: 25 },
]

 onSubmit(form: NgForm) {
    console.log(form.value);
  }
}

Answer 1

Make following change in the component - Have a variable zipValue. Set it’s initial value to one of you zip array values [it is also fine to have undefined] -

export class FormDeComponent {

zipValue;

zip = [
    { view: '1010 - Innere Stadt', value: 24 },
    { view: '1020 - Leopoldstadt', value: 25 },
]

ngOnItit() {

}

 onSubmit(form: NgForm) {
    console.log(form.value.zip);
    console.log(this.zipValue);//you should see mat-select selected value; which would be an object.
  }
}

In template make the following change-

EDIT 1 - Use z.view in mat-option like this [This change is for - when you were needed "view" in zip

<mat-option *ngFor="let z of zip" [value]="z.view" >{{z.view}} 
    </mat-option>

EDIT 2 - Use z in mat-option like this [This change is for - when you need both view and value in zip; This is the same as my very first solution]

<mat-option *ngFor="let z of zip" [value]="z" >{{z.view}} 
    </mat-option>

In "Edit 2" on click of button, console.log(form.value.zip); will return {view: '1010 - Innere Stadt', value: 24} which has both value and view. While user will see the "view" in Mat-Select. This is the standard way to implement Mat-Select.

see the following stackblitz - https://stackblitz.com/edit/angular-cvjpxq?file=app/select-overview-example.ts

If you still want form.zip.value to return "1010 - Innere Stadt" and you want "value" then "EDIT 1" is the solution and then you will have to find that object in your zip array like this -

const foundZip = this.zip.find(z => z.view === form.value.zip)