混合应用中用Angular 5表单替换ng-form的技术实现咨询

嘿，我来帮你梳理下从AngularJS的ng-form迁移到Angular 5表单的思路，尤其是这种分步表单的场景～

Angular 5（现在统一称为Angular）的表单系统和AngularJS的ng-form有对应替代方案，针对你这种分步嵌套表单的场景，下面分两种主流实现方式拆解，同时覆盖混合应用的过渡注意事项。

一、响应式表单方案（推荐，适合复杂分步场景） #

响应式表单在Angular里更灵活，步骤间的状态管理更清晰，非常适合多步骤表单的场景。

1. 父组件（原包含<form>的容器） #

先在父组件中创建顶层FormGroup，给每个步骤分配独立的子FormGroup：

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

@Component({
  selector: 'app-parent',
  template: `
    <form [formGroup]="completeForm" (ngSubmit)="onSubmit()">
      <!-- 步骤组件通过formGroupName绑定子表单 -->
      <app-first-step *ngIf="currentStep === 0" formGroupName="firstStep"></app-first-step>
      <app-second-step *ngIf="currentStep === 1" formGroupName="secondStep"></app-second-step>
      <app-third-step *ngIf="currentStep === 2" formGroupName="thirdStep"></app-third-step>
      <app-fourth-step *ngIf="currentStep === 3" formGroupName="fourthStep"></app-fourth-step>
      <app-fifth-step *ngIf="currentStep === 4" formGroupName="fifthStep"></app-fifth-step>
      
      <div class="step-controls">
        <button (click)="goToPrevStep()" [disabled]="currentStep === 0">上一步</button>
        <button (click)="goToNextStep()" [disabled]="!currentStepForm.valid">
          {{ currentStep === 4 ? '提交' : '下一步' }}
        </button>
      </div>
    </form>
  `
})
export class ParentComponent implements OnInit {
  completeForm: FormGroup;
  currentStep = 0;
  private stepNames = ['firstStep', 'secondStep', 'thirdStep', 'fourthStep', 'fifthStep'];

  constructor(private fb: FormBuilder) {}

  ngOnInit() {
    // 构建顶层表单，包含所有步骤的子表单组
    this.completeForm = this.fb.group({
      firstStep: this.fb.group({
        // 第一步的表单控件，示例：用户名
        username: ['', [Validators.required, Validators.minLength(3)]]
      }),
      secondStep: this.fb.group({
        // 第二步的表单控件，示例：手机号
        phone: ['', [Validators.required, Validators.pattern(/^1[3-9]\d{9}$/)]]
      }),
      thirdStep: this.fb.group({ /* 第三步控件 */ }),
      fourthStep: this.fb.group({ /* 第四步控件 */ }),
      fifthStep: this.fb.group({ /* 第五步控件 */ })
    });
  }

  // 获取当前步骤的表单组
  get currentStepForm(): FormGroup {
    return this.completeForm.get(this.stepNames[this.currentStep]) as FormGroup;
  }

  goToNextStep() {
    if (this.currentStepForm.valid) {
      if (this.currentStep === 4) {
        this.onSubmit();
      } else {
        this.currentStep++;
      }
    }
  }

  goToPrevStep() {
    this.currentStep--;
  }

  onSubmit() {
    if (this.completeForm.valid) {
      console.log('表单提交数据：', this.completeForm.value);
      // 这里写提交后端的逻辑
    }
  }
}

2. 子步骤组件（比如FirstStepComponent） #

把原来的AngularJS指令改成Angular组件，直接关联父组件传递的子表单组：

// first-step.component.ts
import { Component, Input } from '@angular/core';
import { FormGroup } from '@angular/forms';

@Component({
  selector: 'app-first-step',
  template: `
    <div [formGroup]="stepForm">
      <label>用户名：</label>
      <input formControlName="username" type="text" placeholder="请输入用户名">
      
      <!-- 显示验证错误 -->
      <div *ngIf="stepForm.get('username').invalid && stepForm.get('username').touched">
        <span *ngIf="stepForm.get('username').errors.required">用户名不能为空</span>
        <span *ngIf="stepForm.get('username').errors.minlength">用户名至少3个字符</span>
      </div>
    </div>
  `
})
export class FirstStepComponent {
  // 通过Input接收父组件的子表单组
  @Input() formGroupName: string;
  get stepForm(): FormGroup {
    return this.parentForm.get(this.formGroupName) as FormGroup;
  }

  constructor(@Optional() @Host() private parentForm: FormGroup) {}
}

二、模板驱动表单方案（贴近AngularJS写法） #

如果更习惯模板驱动的方式，和AngularJS的ng-form逻辑最接近，可以用ngModelGroup替代原来的ng-form：

1. 父组件模板 #

<!-- parent.component.html -->
<form #completeForm="ngForm" (ngSubmit)="onSubmit(completeForm)">
  <app-first-step *ngIf="currentStep === 0" ngModelGroup="firstStep"></app-first-step>
  <app-second-step *ngIf="currentStep === 1" ngModelGroup="secondStep"></app-second-step>
  <!-- 其他步骤组件 -->
  
  <div class="step-controls">
    <button (click)="goToPrevStep()" [disabled]="currentStep === 0">上一步</button>
    <button (click)="goToNextStep()" [disabled]="!currentStepForm.valid">
      {{ currentStep === 4 ? '提交' : '下一步' }}
    </button>
  </div>
</form>

// parent.component.ts
import { Component, ViewChild } from '@angular/core';
import { NgForm } from '@angular/forms';

@Component({
  selector: 'app-parent',
  templateUrl: './parent.component.html'
})
export class ParentComponent {
  currentStep = 0;
  private stepNames = ['firstStep', 'secondStep', 'thirdStep', 'fourthStep', 'fifthStep'];
  @ViewChild('completeForm') completeForm: NgForm;

  get currentStepForm() {
    return this.completeForm.form.get(this.stepNames[this.currentStep]);
  }

  goToNextStep() {
    if (this.currentStepForm.valid) {
      this.currentStep < 4 ? this.currentStep++ : this.onSubmit(this.completeForm);
    }
  }

  goToPrevStep() {
    this.currentStep--;
  }

  onSubmit(form: NgForm) {
    if (form.valid) {
      console.log('提交数据：', form.value);
    }
  }
}

2. 子步骤组件模板 #

<!-- first-step.component.html -->
<div ngModelGroup="firstStep" #firstStep="ngModelGroup">
  <label>用户名：</label>
  <input name="username" ngModel required minlength="3" placeholder="请输入用户名">
  
  <div *ngIf="firstStep.invalid && firstStep.touched">
    <span *ngIf="firstStep.controls.username.errors.required">用户名不能为空</span>
    <span *ngIf="firstStep.controls.username.errors.minlength">用户名至少3个字符</span>
  </div>
</div>

三、混合应用（AngularJS + Angular 5）过渡注意事项 #

如果你的应用是混合模式，同时运行AngularJS和Angular代码，需要注意：

• 先确保正确配置UpgradeModule，实现两个框架的桥接，Angular组件可以在AngularJS模板中正常使用，反之亦然。
• 可以逐步替换步骤：先把某一个AngularJS指令改成Angular组件，通过升级机制在AngularJS父表单中使用，通过服务或输入属性同步表单状态。
• 过渡期间尽量统一表单策略：要么逐步把所有ng-form替换成Angular表单，要么通过共享服务同步两个框架的表单数据，避免状态混乱。

关键对应关系总结 #

这样一步步替换，就能平滑把原来的分步表单迁移到Angular 5的表单系统中啦～

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