Try to send value of input to function [Angular with mat-select (Material)]

Question

Hey i have form in my project and i try to send to value of mat-select

my html:

  <mat-form-field class="input-class" appearance="fill">
            <mat-label>בחר שותף <i class="far fa-id-card"></i></mat-label>
            <mat-select placeholder="בחר שותף">
                <mat-option value="partner" #partnerValue *ngFor="let partner of partnersData">{{partner}}</mat-option>
            </mat-select>
        </mat-form-field>
   <div class="col-sm">
        <button class="aproveBtn" (click)="submitForm(partnerValue)">Create</button>
    </div>

my ts file:

  submitForm(partner) {
    console.log(partner);
  }

its console undefiend or error what is the problem??

<mat-select #partnerValue placeholder="בחר שותף"> & (click)="submitForm(partnerValue.value)" — user4676340
– user4676340, Commented Oct 2, 2019 at 11:45
Its not work, it console "partner" and not the original value that selected — Baruch_Mashasha
– Baruch_Mashasha, Commented Oct 2, 2019 at 11:54

zerocewl · Accepted Answer · 2019-10-02 11:54:27Z

1

You can use angulars two way binding:

 <mat-select [(value)]="selectedPartner">
...
 <button class="aproveBtn" (click)="submitForm(selectedPartner)">Create</button>

Have a look at the angular materials select API for more examples.

A Stackblitz from the docs which uses 2-way value binding.

answered Oct 2, 2019 at 11:54

zerocewl

12.9k8 gold badges34 silver badges58 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Anand Bhushan · Accepted Answer · 2019-10-03 09:20:30Z

0

You can modify your html file as-

<mat-form-field class="input-class" appearance="fill">
            <mat-label>בחר שותף <i class="far fa-id-card"></i></mat-label>
            <mat-select #partnerValue placeholder="בחר שותף">
                <mat-option [value]="partner"  *ngFor="let partner of partnersData">{{partner}}</mat-option>
            </mat-select>
        </mat-form-field>
   <div class="col-sm">
        <button class="aproveBtn" (click)="submitForm(partnerValue.value)">Create</button>
    </div>

Here is a stackblitz demo.

answered Oct 3, 2019 at 9:20

Anand Bhushan

7831 gold badge8 silver badges20 bronze badges

Collectives™ on Stack Overflow

Try to send value of input to function [Angular with mat-select (Material)]

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related