javascript - 创建没有 Angular ui 路由器的多步表单

Question

please look image description here我需要在不使用 Angular UI 路由器和 Angular Material 的情况下创建一个多步骤表单。谁能帮帮我。

<div class="wizard">
  <a routerLinkActive="active" [routerLink]="['/customer-dashboard/customer-information/information-form']" [routerLinkActiveOptions]="{exact: true}">
      Submit Information
  </a>
  <a [class.disabled]="idTab" routerLinkActive="active" [routerLink]="['/customer-dashboard/customer-information/id-form']" [routerLinkActiveOptions]="{exact: false}">
      Submit Id
  </a>
  <a  routerLinkActive="active" [routerLink]="['/customer-dashboard/customer-information/verify-identity']" [routerLinkActiveOptions]="{exact: false}">
      Verify Identity
  </a>
  <a routerLinkActive="active" [routerLink]="['/customer-dashboard/customer-information/final-validation']" [routerLinkActiveOptions]="{exact: false}">
    Final Validation
  </a>
  <a routerLinkActive="active" [routerLink]="['/customer-dashboard/customer-information/approval']" [routerLinkActiveOptions]="{exact: false}">
    Approval
  </a>
</div>

Answer 1

工作 CodesandBox

app.component.html

<div>
  <span class="state-container" [ngStyle]="state === 1 && {'color': 'red'}"
    >state 1</span
  >
  <span class="state-container" [ngStyle]="state === 2 && {'color': 'red'}"
    >state 2</span
  >
  <span class="state-container" [ngStyle]="state === 3 && {'color': 'red'}"
    >state 3</span
  >
</div>
<div *ngIf="state === 1">
  <form #f1="ngForm" (ngSubmit)="onSubmit(user)" novalidate>
    <label for="name">Name</label>
    <input name="name" id="name" [(ngModel)]="user.name" />
    <label for="family">Family</label>
    <input name="family" id="family" [(ngModel)]="user.family" />
    <button (click)="next(user)">Next</button>
  </form>
</div>
<div *ngIf="state === 2">
  <form #f2="ngForm" (ngSubmit)="onSubmit(user)" novalidate>
    <label for="address">Address</label>
    <input name="address" id="family" [(ngModel)]="user.address" />
    <button (click)="back()">Back</button>
    <button (click)="next(user)">Next</button>
  </form>
</div>
<div *ngIf="state === 3">
  <p>The End</p>

  <button (click)="back()">Back</button>
  <button (click)="reset()">Reset</button>
  <button (click)="save(user)">Save</button>
</div>

app.component.ts

import { Component, OnInit } from "@angular/core";
interface User {
  name: string;
  family: string;
  address: string;
}
@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent implements OnInit {
  title = "CodeSandbox";
  state = 1;
  user: User;
  ngOnInit() {
    this.user = {
      name: "",
      family: "",
      address: ""
    };
  }
  save(user: User) {
    alert("Final Result:\n\n" + JSON.stringify(user));
  }
  next(user: User) {
    ++this.state;
    alert(JSON.stringify(user));
  }
  back() {
    --this.state;
  }
  reset() {
    this.state = 1;
    this.user = {
      name: "",
      family: "",
      address: ""
    };
  }
}

app.module.ts

import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";

import { AppComponent } from "./app.component";
import { FormsModule } from "@angular/forms";

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, FormsModule],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

我个人不推荐这种方法。请记住，如果您不保存数据并刷新页面，您的数据就会消失。