Angular Material步进器：数据库数据填充子组件表单失败问题

方案1：@Input传数据 + patchValue填充表单 #

这是最直接的实现方式，主组件拿到后端数据后，通过@Input传递给对应子组件，子组件在数据就绪后用patchValue更新表单控件。

子组件（以step1为例）代码： #

import { Component, Input, OnInit, SimpleChanges } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';

@Component({
  selector: 'create-stepper-step-one',
  templateUrl: './create-stepper-step-one.component.html'
})
export class CreateStepperStepOneComponent implements OnInit {
  stepForm: FormGroup;
  @Input() userData: any;

  constructor(private fb: FormBuilder) {
    // 初始化表单控件
    this.stepForm = this.fb.group({
      firstName: [''],
      middleName: [''],
      lastName: [''],
      gender: [''],
      dateOfBirth: ['']
    });
  }

  ngOnInit(): void {
    // 初始化时如果已有数据，直接填充
    if (this.userData) {
      this.fillForm();
    }
  }

  // 监听Input数据变化（处理异步获取数据的情况）
  ngOnChanges(changes: SimpleChanges): void {
    if (changes['userData'] && changes['userData'].currentValue) {
      this.fillForm();
    }
  }

  private fillForm(): void {
    // 用patchValue只填充匹配的字段，无需全量赋值
    this.stepForm.patchValue(this.userData);
  }
}

主组件模板： #

<mat-horizontal-stepper>
  <mat-step>
    <ng-template matStepLabel>基本信息</ng-template>
    <create-stepper-step-one [userData]="fetchedUserData"></create-stepper-step-one>
  </mat-step>
  <mat-step>
    <ng-template matStepLabel>身份信息</ng-template>
    <create-stepper-step-two [userData]="fetchedUserData"></create-stepper-step-two>
  </mat-step>
  <mat-step>
    <ng-template matStepLabel>联系方式</ng-template>
    <create-stepper-step-three [userData]="fetchedUserData"></create-stepper-step-three>
  </mat-step>
</mat-horizontal-stepper>

主组件获取数据逻辑： #

fetchedUserData: any;

ngOnInit(): void {
  // 模拟从后端获取数据
  this.userService.getUserById(1).subscribe(data => {
    this.fetchedUserData = data;
  });
}

方案2：嵌套FormGroup统一管理表单 #

如果你的步进器表单是整体关联的，可以在主组件创建父FormGroup，包含三个子FormGroup，分别传给对应子组件。主组件拿到数据后直接更新父表单，子组件的表单会自动同步数据。

主组件代码： #

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';

@Component({
  selector: 'create-stepper',
  templateUrl: './create-stepper.component.html'
})
export class CreateStepperComponent implements OnInit {
  parentForm: FormGroup;
  fetchedUserData: any;

  constructor(private fb: FormBuilder) {
    // 创建嵌套表单组
    this.parentForm = this.fb.group({
      step1: this.fb.group({
        firstName: [''],
        middleName: [''],
        lastName: [''],
        gender: [''],
        dateOfBirth: ['']
      }),
      step2: this.fb.group({
        countryofBirth: [''],
        nationality: ['']
      }),
      step3: this.fb.group({
        email: [''],
        phoneNumber: ['']
      })
    });
  }

  ngOnInit(): void {
    this.userService.getUserById(1).subscribe(data => {
      this.fetchedUserData = data;
      // 直接更新父表单，子表单自动填充
      this.parentForm.patchValue(data);
    });
  }
}

主组件模板： #

<mat-horizontal-stepper [linear]="true" [formGroup]="parentForm">
  <mat-step formGroupName="step1">
    <ng-template matStepLabel>基本信息</ng-template>
    <create-stepper-step-one [formGroup]="parentForm.get('step1')"></create-stepper-step-one>
  </mat-step>
  <mat-step formGroupName="step2">
    <ng-template matStepLabel>身份信息</ng-template>
    <create-stepper-step-two [formGroup]="parentForm.get('step2')"></create-stepper-step-two>
  </mat-step>
  <mat-step formGroupName="step3">
    <ng-template matStepLabel>联系方式</ng-template>
    <create-stepper-step-three [formGroup]="parentForm.get('step3')"></create-stepper-step-three>
  </mat-step>
</mat-horizontal-stepper>

子组件（step1）代码： #

import { Component, Input } from '@angular/core';
import { FormGroup } from '@angular/forms';

@Component({
  selector: 'create-stepper-step-one',
  templateUrl: './create-stepper-step-one.component.html'
})
export class CreateStepperStepOneComponent {
  @Input() formGroup: FormGroup;
}

子组件模板： #

<div [formGroup]="formGroup">
  <mat-form-field>
    <input matInput formControlName="firstName" placeholder="First Name">
  </mat-form-field>
  <!-- 其他控件同理 -->
</div>

关键注意事项 #

• 确保子组件表单控件的formControlName与后端返回数据的字段名完全匹配，否则patchValue无法识别。
• 如果后端数据字段名和表单控件名不一致，可以在填充前做字段映射，比如：

  this.stepForm.patchValue({
    firstName: this.userData.first_name,
    lastName: this.userData.last_name
  });
  

• 用patchValue而非setValue，因为patchValue只更新存在的字段，不会因为缺少某些字段报错。

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