时间戳

首页 > 解决方案 > 如何在 Angular 11 材料中的 Stepper 中获取 formControlName 值形式？

javascript - 如何在 Angular 11 材料中的 Stepper 中获取 formControlName 值形式？

问题描述

我使用角材料 11，我使用步进材料组件https://material.angular.io/components/stepper/examples。我想在第一步中获取选定的值，并且我想在第一步中向用户显示带有他选择的值的消息。但我不能这样做。这是我的 component.html 代码：

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

还有我的 component.ts 代码：

    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);
        }

问题是如何在 mat-selected 中获取选定的值，并将该值传递给 typescript 文件中的 pselectedSport，然后在第二步中显示它。

标签： javascriptangulartypescriptangular-materialangular-material-stepper

解决方案

MatSelect的输出事件是selectionChange，不是change。所以你需要改变你的代码：

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

传递给您的处理函数的事件将是 type MatSelectChange，因此要获取值只需访问该value属性。

推荐阅读