Angular 7多步骤表单开发：分步注册表单与末步服务调用实现

Alright, let's walk through building a multi-step registration form in Angular 7 that triggers a service call on the final step. I’ve implemented several of these wizards before, so here’s a practical, step-by-step guide:

First, let's outline the components we'll need. You'll want a parent container component to handle navigation, plus individual components for each step. Run these commands to generate them:

ng generate component registration-wizard
ng generate component registration-wizard/personal-info
ng generate component registration-wizard/contact-details
ng generate component registration-wizard/final-review
ng generate service registration/registration-data

Since we need to persist form data across steps, a service is perfect for this. It'll hold our registration data and handle the final API call. Here's what registration-data.service.ts might look like:

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class RegistrationDataService {
  registrationData: any = {
    personal: {},
    contact: {}
  };

  constructor(private http: HttpClient) {}

  submitRegistration(): Observable<any> {
    // Replace with your actual API endpoint
    return this.http.post('/api/register', this.registrationData);
  }
}

Each step component will have its own form with validation. Let's take the personal-info.component.ts as an example:

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { RegistrationDataService } from '../../registration-data.service';

@Component({
  selector: 'app-personal-info',
  templateUrl: './personal-info.component.html'
})
export class PersonalInfoComponent implements OnInit {
  personalForm: FormGroup;

  constructor(
    private fb: FormBuilder,
    private registrationService: RegistrationDataService
  ) {}

  ngOnInit(): void {
    this.personalForm = this.fb.group({
      firstName: ['', Validators.required],
      lastName: ['', Validators.required],
      dateOfBirth: ['', Validators.required]
    });

    // Pre-fill with existing data if navigating back
    this.personalForm.patchValue(this.registrationService.registrationData.personal);
  }

  saveData(): void {
    if (this.personalForm.valid) {
      this.registrationService.registrationData.personal = this.personalForm.value;
    }
  }
}

And its template (personal-info.component.html):

<form [formGroup]="personalForm">
  <div class="form-group">
    <label>First Name</label>
    <input type="text" formControlName="firstName" class="form-control">
    <div *ngIf="personalForm.get('firstName').invalid && personalForm.get('firstName').touched">
      First name is required.
    </div>
  </div>

  <div class="form-group">
    <label>Last Name</label>
    <input type="text" formControlName="lastName" class="form-control">
    <div *ngIf="personalForm.get('lastName').invalid && personalForm.get('lastName').touched">
      Last name is required.
    </div>
  </div>

  <div class="form-group">
    <label>Date of Birth</label>
    <input type="date" formControlName="dateOfBirth" class="form-control">
    <div *ngIf="personalForm.get('dateOfBirth').invalid && personalForm.get('dateOfBirth').touched">
      Date of birth is required.
    </div>
  </div>
</form>

The parent component will control which step is displayed and handle navigation logic. Here's registration-wizard.component.ts:

import { Component } from '@angular/core';
import { RegistrationDataService } from '../registration-data.service';

@Component({
  selector: 'app-registration-wizard',
  templateUrl: './registration-wizard.component.html'
})
export class RegistrationWizardComponent {
  currentStep = 1;
  totalSteps = 3;

  constructor(private registrationService: RegistrationDataService) {}

  goToNextStep(currentForm: any): void {
    if (currentForm.personalForm?.valid || currentForm.contactForm?.valid) {
      currentForm.saveData();
      if (this.currentStep < this.totalSteps) {
        this.currentStep++;
      }
    } else {
      // Mark all fields as touched to show validation errors
      currentForm.personalForm?.markAllAsTouched();
      currentForm.contactForm?.markAllAsTouched();
    }
  }

  goToPreviousStep(): void {
    if (this.currentStep > 1) {
      this.currentStep--;
    }
  }

  submitRegistration(): void {
    this.registrationService.submitRegistration().subscribe({
      next: (response) => {
        console.log('Registration successful!', response);
        // Handle success - redirect to dashboard, show success message, etc.
      },
      error: (err) => {
        console.error('Registration failed:', err);
        // Handle error - show error message to user
      }
    });
  }
}

And its template (registration-wizard.component.html):

<div class="wizard-container">
  <div class="step-indicator">
    <span [class.active]="currentStep === 1">Step 1: Personal Info</span>
    <span [class.active]="currentStep === 2">Step 2: Contact Details</span>
    <span [class.active]="currentStep === 3">Step 3: Review & Submit</span>
  </div>

  <div *ngIf="currentStep === 1">
    <app-personal-info #personalStep></app-personal-info>
  </div>

  <div *ngIf="currentStep === 2">
    <app-contact-details #contactStep></app-contact-details>
  </div>

  <div *ngIf="currentStep === 3">
    <app-final-review [registrationData]="registrationService.registrationData"></app-final-review>
  </div>

  <div class="navigation-buttons">
    <button *ngIf="currentStep > 1" (click)="goToPreviousStep()" class="btn btn-secondary">
      Previous
    </button>
    <button *ngIf="currentStep < 3" (click)="goToNextStep(currentStep === 1 ? personalStep : contactStep)" class="btn btn-primary">
      Next
    </button>
    <button *ngIf="currentStep === 3" (click)="submitRegistration()" class="btn btn-success">
      Submit Registration
    </button>
  </div>
</div>

The final step should display all collected data for the user to review. Here's a simplified final-review.component.ts:

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

@Component({
  selector: 'app-final-review',
  templateUrl: './final-review.component.html'
})
export class FinalReviewComponent {
  @Input() registrationData: any;
}

And its template:

<div class="review-container">
  <h3>Review Your Information</h3>
  <div class="review-section">
    <h4>Personal Details</h4>
    <p>First Name: {{ registrationData.personal.firstName }}</p>
    <p>Last Name: {{ registrationData.personal.lastName }}</p>
    <p>Date of Birth: {{ registrationData.personal.dateOfBirth }}</p>
  </div>

  <div class="review-section">
    <h4>Contact Details</h4>
    <p>Email: {{ registrationData.contact.email }}</p>
    <p>Phone: {{ registrationData.contact.phone }}</p>
  </div>
</div>

• Validation: Always validate each step before allowing navigation. The example above checks if the form is valid before moving to the next step.
• State Persistence: If you want to persist data across page refreshes, consider using localStorage in your registration service (just don't store sensitive data there!).
• Error Handling: Add user-friendly error messages for API failures, like a toast notification or inline alert.
• Cleanup: Remember to unsubscribe from HTTP observables in your components, or use the async pipe to handle automatic cleanup.

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