How to store and pass the value of Mat-Select using ngModel

Question

I have a mat-select with two Options i.e a user can select whether he is an Individual Customer or Organizational Customer. Now I want to pass the value of the selection to a service class. How can I do that. I have a form which is displayed after the user selects an Option.After filling the form the user clicks on save and all the information of form is saved. With the info I also want to be able to save the mat-select option. How can I do that.

<!-- Dropdown to Select Type of Customer -->
<mat-form-field>
<mat-label>Select Customer Type</mat-label>
<mat-select (onSelectionChange)="getCustType($event)">
<mat-option *ngFor="let obj of custType" (click)="getCustType(obj)" 
[value]="obj.value"> {{ obj.viewValue }}</mat-option>
</mat-select>
</mat-form-field>

Typescript Code

 custType: any[] = [{ value: 'individual', viewValue: 'Individual Customer' }, { value: 'organizational', viewValue: 'Organizational Customer' }];

Typescript Function called on Save button click

  saveIndCustData() {
const savedIndCustomer = {
  agreementId: this.agreementId,
  prefix: this.prefix,
  nameType: this.indCustNameType,
  firstName: this.firstName,
  middleNAme: this.middleName,
  lastName: this.lastName,
  gender: this.gender,
  dateOfBirth: this.parseDate(this.dateOfBirth.toString()),
  citizenship: this.citizenship
};
this.savedIndCustomer.emit(savedIndCustomer);
}

I want to pass the value of mat-select in the above form how can I do that ?

Just add ngModel tag to mat-select <mat-select (onSelectionChange)="getCustType($event)" [(ngModel)]="this.customerType"> — Darsan S Kumar
See : stackoverflow.com/questions/55350480/… , And upvote the answer if helpful — Abhishek Kumar

Mateusz Mateusz · Accepted Answer · 2019-05-09T06:00:27

Add [(ngModel)]="this.selectedCustomerType" to mat-select tag, eg:

<mat-select [(ngModel)]="this.selectedCustomerType" (onSelectionChange)="getCustType($event)">

Then declare public variable selectedCustomerType in your *.component.ts file

How to store and pass the value of Mat-Select using ngModel

1 Answers