CODEWITHSUNDEEP
angularangular-material
Dmitriy Klyushin
Dmitriy Klyushin

Reputation: 489

Angular2 material pass mat-select as model on submit

I need to pass the model of the form onSubmit and one of the elements of the model is a select option. How can I pass both the value and selectionName onSubmit?

Html:

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

 <mat-form-field class="container">
    <mat-select [value]="currentUserRole.RoleId" name="RoleId" required >
      <mat-option  *ngFor="let role of roles" [value]="role.RoleId">{{role.RoleName}}</mat-option>
    </mat-select>
 </mat-form-field>

Typescript:

onSubmit(EditUserFormModel: NgForm) {
}

Upvotes: 0

Views: 864

Answers (2)

mchl18
mchl18

Reputation: 2336

Not sure what you mean by

value and selectionName

I am guessing the value is currentUserRole.RoleId and the selectionName is role.RoleName

In that case

[value]="currentUserRole.RoleId">

The value input specifies the value returned. If both your value and the selectionName are in the currentUserRoleobject, you can just pass this along instead of only the Id to be written to the form fields value.

[value]="currentUserRole">

But this also means you would have to change the displayed customise the displayed text. You can customize this with mat-select-trigger

<mat-form-field>
  <mat-select [value]="currentUserRole.RoleId" name="RoleId" required>
    <mat-select-trigger>
      {{currentUserRole.RoleName}}
    </mat-select-trigger>
    <mat-option  *ngFor="let role of roles" [value]="role.RoleId">{{role.RoleName}}</mat-option>
  </mat-select>
</mat-form-field>

If you are looking for a callback to set the form values have a look at the docs

There is an event selectionChange and a property selected which let you hook into the selected option.

If you want to grab a value from outside of the object which select iterates over you probably want to do that in selectionChange and patch your form object.

HTML

<mat-select 
  [value]="currentUserRole.RoleId" 
  (selectionChange)="setValues($event, EditUserForm)"
  name="RoleId" 
  required 
  > 
      <mat-option  
          *ngFor="let role of roles" 
          [value]="role.RoleId">
            {{role.RoleName}}
      </mat-option>
</mat-select>

TS

public setValues(event, form): void {
  form.patchValue({...})
}

Here you can set values as you wish.

On submit you ideally just pass EditUserFormModel.value to get to your form data.

Sounds kinda like you want to grab values in your onSubmit which I would not encourage. Instead model your form to output all the values you need on submit and just handle the submit itself there. If necessary hook into callbacks to patch values on events.

Upvotes: 2

Antoniossss
Antoniossss

Reputation: 32535

You can use two-way binding

 <mat-select [(value)]="currentUserRole.RoleId" name="RoleId" required >

but this can cause issues in some scenarios, so I would use ngModel

   <mat-select [(ngModel)]="currentUserRole.RoleId" name="RoleId" required >

this way currentUserRole.RoleId will be set to whatever user selects in selection box right away.

If you would like to delay binding (eg. in order to create "reset" feature) you will either have to copy first, or better use ReactiveForms for that.

Upvotes: 0

Related Questions