如何在Angular 6动态表单向导中获取各步骤JSON格式表单数据？

我帮你整理了一套可行的实现方案，核心思路是为每个步骤单独维护表单实例，在完成时统一收集并转换数据，具体如下：

1. 组件类核心实现（带表单验证） #

首先在组件中初始化每个步骤的FormGroup，并编写完成事件的处理逻辑：

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  // 为每个步骤定义独立的表单组
  step1Form: FormGroup;
  step2Form: FormGroup;
  step3Form: FormGroup;
  step4Form: FormGroup;
  step5Form: FormGroup;

  constructor(private fb: FormBuilder) {}

  ngOnInit() {
    // 初始化各步骤表单，添加必要的验证规则
    this.step1Form = this.fb.group({
      firstName: ['', Validators.required],
      lastName: ['', Validators.required]
    });

    this.step2Form = this.fb.group({
      email: ['', [Validators.required, Validators.email]],
      phone: ['', Validators.required]
    });

    this.step3Form = this.fb.group({
      address: ['', Validators.required],
      city: ['', Validators.required]
    });

    this.step4Form = this.fb.group({
      paymentMethod: ['', Validators.required],
      cardNumber: ['']
    });

    this.step5Form = this.fb.group({
      agreeTerms: [false, Validators.requiredTrue]
    });
  }

  // 向导完成时的处理逻辑
  onWizardComplete() {
    // 先校验所有步骤的表单是否有效
    const allFormsValid = [
      this.step1Form.valid,
      this.step2Form.valid,
      this.step3Form.valid,
      this.step4Form.valid,
      this.step5Form.valid
    ].every(isValid => isValid);

    if (!allFormsValid) {
      alert('请补全所有必填信息并确保格式正确！');
      return;
    }

    // 合并所有步骤的表单数据
    const mergedFormData = {
      personalInfo: this.step1Form.value,
      contactInfo: this.step2Form.value,
      addressInfo: this.step3Form.value,
      paymentInfo: this.step4Form.value,
      termsAgreement: this.step5Form.value
    };

    // 转换为格式化的JSON字符串
    const formDataJson = JSON.stringify(mergedFormData, null, 2);
    
    // 这里可以添加提交到后端的逻辑，或者做其他处理
    console.log('最终表单JSON数据:', formDataJson);
  }
}

2. 模板文件对应调整 #

在模板中，将每个步骤的表单绑定到对应的FormGroup，并绑定向导的完成事件：

<aw-wizard (finalStep)="onWizardComplete()">
  <!-- 步骤1：个人信息 -->
  <aw-wizard-step [stepTitle]="'个人信息'">
    <form [formGroup]="step1Form">
      <div class="form-group mb-3">
        <label class="form-label">名字</label>
        <input type="text" formControlName="firstName" class="form-control">
        <div *ngIf="step1Form.get('firstName')?.invalid && step1Form.get('firstName')?.touched" class="text-danger mt-1">
          请输入名字
        </div>
      </div>
      <div class="form-group mb-3">
        <label class="form-label">姓氏</label>
        <input type="text" formControlName="lastName" class="form-control">
        <div *ngIf="step1Form.get('lastName')?.invalid && step1Form.get('lastName')?.touched" class="text-danger mt-1">
          请输入姓氏
        </div>
      </div>
      <button type="button" awNextStep class="btn btn-primary">下一步</button>
    </form>
  </aw-wizard-step>

  <!-- 步骤2：联系方式 -->
  <aw-wizard-step [stepTitle]="'联系方式'">
    <form [formGroup]="step2Form">
      <div class="form-group mb-3">
        <label class="form-label">邮箱</label>
        <input type="email" formControlName="email" class="form-control">
        <div *ngIf="step2Form.get('email')?.invalid && step2Form.get('email')?.touched" class="text-danger mt-1">
          请输入有效的邮箱地址
        </div>
      </div>
      <div class="form-group mb-3">
        <label class="form-label">电话</label>
        <input type="tel" formControlName="phone" class="form-control">
        <div *ngIf="step2Form.get('phone')?.invalid && step2Form.get('phone')?.touched" class="text-danger mt-1">
          请输入联系电话
        </div>
      </div>
      <button type="button" awPreviousStep class="btn btn-secondary me-2">上一步</button>
      <button type="button" awNextStep class="btn btn-primary">下一步</button>
    </form>
  </aw-wizard-step>

  <!-- 步骤3、4、5参照上述结构实现，绑定对应的FormGroup即可 -->
  
  <!-- 步骤5：同意条款（最后一步） -->
  <aw-wizard-step [stepTitle]="'同意条款'">
    <form [formGroup]="step5Form">
      <div class="form-check mb-3">
        <input type="checkbox" formControlName="agreeTerms" class="form-check-input">
        <label class="form-check-label">我同意服务条款与隐私政策</label>
        <div *ngIf="step5Form.get('agreeTerms')?.invalid && step5Form.get('agreeTerms')?.touched" class="text-danger mt-1">
          必须同意条款才能完成向导
        </div>
      </div>
      <button type="button" awPreviousStep class="btn btn-secondary me-2">上一步</button>
      <button type="button" awFinalStep class="btn btn-success">完成</button>
    </form>
  </aw-wizard-step>
</aw-wizard>

3. 动态步骤场景的适配方案 #

如果你的向导步骤是动态生成的（比如根据后端配置添加步骤），可以用数组来管理所有表单实例：

// 组件类中定义动态表单数组
dynamicStepForms: FormGroup[] = [];

// 动态添加步骤表单的示例方法
addDynamicStep() {
  this.dynamicStepForms.push(this.fb.group({
    // 根据需求定义动态表单的控件及验证
    field1: ['', Validators.required],
    field2: ['']
  }));
}

// 动态步骤的完成处理逻辑
onDynamicWizardComplete() {
  // 校验所有动态表单
  const allValid = this.dynamicStepForms.every(form => form.valid);
  if (!allValid) {
    alert('请完成所有步骤的必填项！');
    return;
  }

  // 收集动态表单数据并转换为JSON
  const dynamicFormData = this.dynamicStepForms.map((form, index) => ({
    [`step_${index + 1}`]: form.value
  })).reduce((acc, curr) => ({ ...acc, ...curr }), {});
  
  const jsonData = JSON.stringify(dynamicFormData, null, 2);
  console.log('动态表单JSON数据:', jsonData);
}

关键要点总结 #

• 每个步骤使用独立的FormGroup，便于单独管理验证和状态
• 通过aw-wizard的finalStep事件监听完成操作
• 收集数据前务必校验所有表单的有效性，避免无效数据
• 使用JSON.stringify将合并后的对象转换为格式化的JSON字符串

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