CODEWITHSUNDEEP
angularformsangular-material
Baruch_Mashasha
Baruch_Mashasha

Reputation: 207

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

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??

Upvotes: 0

Views: 519

Answers (2)

Anand Bhushan
Anand Bhushan

Reputation: 783

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.

Upvotes: 0

zerocewl
zerocewl

Reputation: 12804

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.

Upvotes: 1

Related Questions