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

【问题标题】：How to get formControlName value forms in Stepper in Angular 11 material?如何在 Angular 11 材料中的 Stepper 中获取 formControlName 值形式？
【发布时间】：2021-05-04 13:10:27
【问题描述】：

我使用 Angular 材质 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，然后在第二步中显示它。

【问题讨论】：

在 sportHandler 方法中尝试 this.firstFormGroup.controls.sport.value 并将其分配给您的 pselectedSport 属性。
hi@Owen Kelvin，我有它，但我没有看到我的声明。而且我也没有看到我的console.log。我可以在 ngOnInit 中添加我的运动处理程序还是如何添加？

标签： javascript angular typescript angular-material angular-material-stepper

【解决方案1】：

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>

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

【讨论】：