Mat Stepper输入框复用formControlName致值异常问题求助

嘿，我一眼就瞅出问题出在哪了！你的所有输入框都显示同一个值，核心原因是多个输入框绑定了同一个formControlName="firstCtrl"，再加上你混合使用了ngModel和响应式表单的formControlName，直接导致赋值时所有关联这个控件的输入框都同步成了同一个值。

下面给你分步解决：

1. 给每个输入框分配唯一的表单控件名 #

先修改模板里的formControlName，让每个输入框对应独立的表单控件：

<mat-horizontal-stepper [linear]="isLinear" #stepper>
  <mat-step [stepControl]="firstFormGroup" >
    <form [formGroup]="firstFormGroup">
      <ng-template matStepLabel>Driver Details</ng-template>
      <mat-form-field class="form-field-full-width">
        <!-- 给姓名输入框分配唯一的控件名 -->
        <input [(ngModel)]="driverName" matInput placeholder="Name" formControlName="nameCtrl" required>
      </mat-form-field><br>
      <mat-form-field class="form-field-full-width">
        <!-- 给邮箱输入框分配唯一的控件名 -->
        <input [(ngModel)]="driverEmail" matInput placeholder="Email" formControlName="emailCtrl" required>
      </mat-form-field><br>
      ...
    </form>
  </mat-step>
  <mat-step [stepControl]="secondFormGroup">
    <form [formGroup]="secondFormGroup">
      .....
    </form>
  </mat-step>
</mat-horizontal-stepper>

2. 确保表单组初始化时包含这些控件 #

在组件类里，初始化firstFormGroup的时候要把这两个新控件加进去：

import { FormBuilder, FormGroup, Validators } from '@angular/forms';

// 组件类内的代码
constructor(private fb: FormBuilder) {}

ngOnInit() {
  // 初始化表单组，包含姓名和邮箱的必填控件
  this.firstFormGroup = this.fb.group({
    nameCtrl: ['', Validators.required],
    emailCtrl: ['', [Validators.required, Validators.email]]
  });
}

3. 优化赋值逻辑（推荐用纯响应式表单方式） #

混合ngModel和响应式表单很容易出现同步混乱，建议直接通过表单组赋值，这更符合Angular的设计规范：

ngAfterViewInit(){
  this.route.queryParams.subscribe(params => {
    const driverDetails = JSON.parse(params['driver']);
    // 直接通过表单组批量设置控件值
    this.firstFormGroup.patchValue({
      nameCtrl: driverDetails['name'],
      emailCtrl: driverDetails['email']
    });
    // 这里通常不需要手动触发变更检测，patchValue会自动触发视图更新
    // this.cdRef.detectChanges();
  });
}

如果你非要保留ngModel，至少要保证每个ngModel变量和formControlName一一对应，但还是更推荐用纯响应式表单的写法，能避免很多潜在问题。

补充说明 #

当多个输入框绑定同一个formControlName时，它们本质上关联的是同一个表单控件实例，所以你给其中一个ngModel变量赋值时，所有绑定这个控件的输入框都会同步显示这个值——这就是为什么所有输入框都显示driverName的核心原因。

内容的提问来源于stack exchange，提问作者shayanmalinda