Angular响应式表单分步显隐字段问题求助

核心逻辑 #

1. 用currentStep变量控制当前展示的步骤，仅显示当前步骤的字段
2. 下一步按钮仅在当前步骤所有必填字段验证通过时可点击
3. 切换交易类型（purchase/refinance）时，自动重置无关字段并回到初始步骤，避免残留旧数据干扰

TS代码实现 #

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

@Component({
  selector: 'app-step-form',
  templateUrl: './step-form.component.html',
  styleUrls: ['./step-form.component.css']
})
export class StepFormComponent implements OnInit {
  stepForm: FormGroup;
  currentStep = 1;
  selectedType: 'purchase' | 'refinance' = 'purchase';

  constructor(private fb: FormBuilder) {
    this.stepForm = this.fb.group({
      // 通用字段（第一步）
      transactionType: ['purchase', Validators.required],
      fullName: ['', Validators.required],
      email: ['', [Validators.required, Validators.email]],
      // Purchase专属字段（第二步）
      propertyPrice: ['', Validators.required],
      downPayment: ['', Validators.required],
      // Refinance专属字段（第二步）
      currentLoanAmount: ['', Validators.required],
      desiredCashOut: ['', Validators.required]
    });
  }

  ngOnInit(): void {
    // 监听交易类型切换
    this.stepForm.get('transactionType')?.valueChanges.subscribe(type => {
      this.selectedType = type;
      this.currentStep = 1; // 切换后回到第一步
      // 重置无关字段，避免验证错误残留
      if (type === 'purchase') {
        this.stepForm.get('currentLoanAmount')?.reset();
        this.stepForm.get('desiredCashOut')?.reset();
      } else {
        this.stepForm.get('propertyPrice')?.reset();
        this.stepForm.get('downPayment')?.reset();
      }
    });
  }

  // 判断当前步骤是否有效
  isCurrentStepValid(): boolean {
    switch (this.currentStep) {
      case 1:
        return this.stepForm.get('transactionType')?.valid && 
               this.stepForm.get('fullName')?.valid && 
               this.stepForm.get('email')?.valid;
      case 2:
        if (this.selectedType === 'purchase') {
          return this.stepForm.get('propertyPrice')?.valid && 
                 this.stepForm.get('downPayment')?.valid;
        } else {
          return this.stepForm.get('currentLoanAmount')?.valid && 
                 this.stepForm.get('desiredCashOut')?.valid;
        }
      default:
        return false;
    }
  }

  // 下一步
  nextStep(): void {
    if (this.isCurrentStepValid()) {
      this.currentStep++;
    }
  }

  // 返回上一步
  prevStep(): void {
    if (this.currentStep > 1) {
      this.currentStep--;
    }
  }
}

HTML模板实现 #

<form [formGroup]="stepForm">
  <!-- 第一步：通用信息 -->
  <div *ngIf="currentStep === 1">
    <h3>步骤1：基本信息</h3>
    <div>
      <label>交易类型：</label>
      <select formControlName="transactionType">
        <option value="purchase">购房（Purchase）</option>
        <option value="refinance">再融资（Refinance）</option>
      </select>
    </div>
    <div>
      <label>姓名：</label>
      <input type="text" formControlName="fullName">
      <span *ngIf="stepForm.get('fullName')?.invalid && stepForm.get('fullName')?.touched">请输入姓名</span>
    </div>
    <div>
      <label>邮箱：</label>
      <input type="email" formControlName="email">
      <span *ngIf="stepForm.get('email')?.invalid && stepForm.get('email')?.touched">请输入有效邮箱</span>
    </div>
    <button (click)="nextStep()" [disabled]="!isCurrentStepValid()">下一步</button>
  </div>

  <!-- 第二步：交易类型专属字段 -->
  <div *ngIf="currentStep === 2">
    <h3>步骤2：交易详情</h3>
    <!-- Purchase专属字段 -->
    <div *ngIf="selectedType === 'purchase'">
      <div>
        <label>房产总价：</label>
        <input type="number" formControlName="propertyPrice">
        <span *ngIf="stepForm.get('propertyPrice')?.invalid && stepForm.get('propertyPrice')?.touched">请输入房产总价</span>
      </div>
      <div>
        <label>首付金额：</label>
        <input type="number" formControlName="downPayment">
        <span *ngIf="stepForm.get('downPayment')?.invalid && stepForm.get('downPayment')?.touched">请输入首付金额</span>
      </div>
    </div>

    <!-- Refinance专属字段 -->
    <div *ngIf="selectedType === 'refinance'">
      <div>
        <label>当前贷款余额：</label>
        <input type="number" formControlName="currentLoanAmount">
        <span *ngIf="stepForm.get('currentLoanAmount')?.invalid && stepForm.get('currentLoanAmount')?.touched">请输入当前贷款余额</span>
      </div>
      <div>
        <label>期望套现金额：</label>
        <input type="number" formControlName="desiredCashOut">
        <span *ngIf="stepForm.get('desiredCashOut')?.invalid && stepForm.get('desiredCashOut')?.touched">请输入期望套现金额</span>
      </div>
    </div>

    <button (click)="prevStep()">上一步</button>
    <button type="submit" [disabled]="!isCurrentStepValid()">提交表单</button>
  </div>
</form>

关键细节说明 #

• 切换交易类型时，通过valueChanges监听，自动重置无关字段，避免旧数据导致的验证错误
• 下一步按钮的disabled状态绑定isCurrentStepValid()，确保只有当前步骤所有必填项验证通过才能进入下一级
• 用currentStep严格控制步骤显示，避免多步骤同时展示的问题
• 字段错误提示仅在控件touched（用户交互过）且invalid时显示，提升用户体验

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