How to get formControlName value forms in Stepper in Angular 11 material?

Question

I use angular material 11 and i use the stepper material component https://material.angular.io/components/stepper/examples. I want to get the selected value in the first step and i want to display to user the message with his selected value in first step. but i can't do this. This is my component.html code :

    <mat-horizontal-stepper [linear]="isLinear" #stepper="matHorizontalStepper">
      <mat-step [stepControl]="firstFormGroup">
        <form [formGroup]="firstFormGroup">
          <ng-template matStepLabel>Fill out your name</ng-template>
          <mat-form-field>
            <input matInput placeholder="Last name, First name" formControlName="firstCtrl" required>
          </mat-form-field>
          <mat-select formControlName="sport" placeholder="your favorite sport"  (change)="sportHandler($event)" required>
            <ng-container >
              <mat-option value="F">football</mat-option>
              <mat-option value="B">basketball</mat-option>
            </ng-container>
          </mat-select>
          <div>
            <button mat-button matStepperNext>Next</button>
          </div>
        </form>
      </mat-step>
      <mat-step [stepControl]="secondFormGroup">
        <form [formGroup]="secondFormGroup">
          <ng-template matStepLabel>Fill out your address</ng-template>
           <p>{{pselectedSport != ''  ? 'The amount for practicing ' : ''}} {{pselectedSport != ''  ? pselectedSport + ' is ': ''}}{{pselectedPrix != ''  ? pselectedPrix  : ''}}{{pselectedPrix != ''  ? '$' : ''}}</p>
          <mat-form-field>
            <input matInput placeholder="Address" formControlName="secondCtrl" required>
          </mat-form-field>
          <div>
            <button mat-button matStepperPrevious>Back</button>
            <button mat-button matStepperNext>Next</button>
          </div>
        </form>
      </mat-step>
      <mat-step>
        <ng-template matStepLabel>Done</ng-template>
        You are now done.
        <div>
          <button mat-button matStepperPrevious>Back</button>
          <button mat-button (click)="stepper.reset()">Reset</button>
        </div>
      </mat-step>
    </mat-horizontal-stepper>

And also my component.ts code :

    firstFormGroup: FormGroup;
      secondFormGroup: FormGroup;
      pselectedSport:string = '';
      pselectedPrice:string = '';
    
      constructor(private _formBuilder: FormBuilder) { }
    
      ngOnInit() {
        this.firstFormGroup = this._formBuilder.group({
          firstCtrl: ['', Validators.required],
          sport: ['', Validators.required],
        });
        this.secondFormGroup = this._formBuilder.group({
          secondCtrl: ['', Validators.required]
        });
      }
    
      form1(){
        console.log(this.firstFormGroup.value);
      }
    
      form2(){
        console.log(this.secondFormGroup.value);
      }
    
     sportHandler(event: any) {
        //update the ui
        this.pselectedSport = event.target.value;
        if(this.pselectedSport == 'football') {
          this.pselectedPrice = '15';
        } else {
          this.pselectedPrice = '50';
        }
        console.log('sport : '+this.pselectedSport);
        console.log('price : '+this.pselectedSport);
        }

The problem is how can i get the selected value in mat-selected and to pass this value to my pselectedSport in the typescript file and after to display it in the second step .

Answer 1

The output event for MatSelect is selectionChange, not change. So you need to change your code:

<mat-select formControlName="sport" placeholder="your favorite sport"  (selectionChange)="sportHandler($event)" required>
    <ng-container >
       <mat-option value="F">football</mat-option>
       <mat-option value="B">basketball</mat-option>
    </ng-container>
</mat-select>

The event passed to your handler function will be of type MatSelectChange, so to get the value just access the value property.