时间戳

首页 > 解决方案 > 如何在 Angular 4 中创建表单向导

html - 如何在 Angular 4 中创建表单向导

问题描述

我正在尝试创建表单向导或步骤进度条，单击下一个按钮时我必须移动表单向导，当单击上一个按钮时，我必须返回 angular4 中的表单向导。我需要这样，见下图

在此处输入图像描述

我的 pacaage.json `{ "name": "ph-aware-ng", "version": "0.0.0", "license": "MIT", "scripts": { "ng": "ng", "开始”：“ng 服务”，“构建”：“ng 构建”，“测试”：“ng 测试”，“lint”：“ng lint”，“e2e”：“ng e2e”}，“私有”：true , "依赖": { "@angular/animations": "^4.4.7", "@angular/cdk": "^6.2.1", "@angular/common": "^4.2.4", "@角度/编译器”：“^4.2.4”，“@angular/core”：“^4.2.4”，“@angular/forms”：“^4.2.4”，“@angular/http”：“^4.2 .4", "@angular/material": "^6.2.1", "@angular/platform-b​​rowser": "^4.2.4", "@angular/platform-b​​rowser-dynamic": "^4.2.4", "@angular/router": "^4.2.4", "@toverux /ngx-sweetalert2”：“^3.3.1”，“@types/moment”：“^2.13.0”，“angular2-materialize”：“^15.1.10”，“动画”：“^1.0.0” ，“动画”：“^0.1.3”，“bootstrap”：“4.0.0-beta.2”，“core-js”：“^2.4.1”，“font-awesome”：“^4.7.0 "，"汉堡包"："^0.9.3"，"hammerjs"："^2.0.8"，"jquery"："^2.2.4"，"materialize-css"："^0.100.2"，"时刻": "^2.20.1", "ngx-bootstrap": "^2.0.2", "ngx-toastr": "^6.5.0",“rxjs”：“^5.4.2”，“sweetalert2”：“^7.22.0”，“zone.js”：“^0.8.14”}，“devDependencies”：{“@angular/cli”：“1.4 .5", "@angular/compiler-cli": "^4.2.4", "@angular/language-service": "^4.2.4", "@types/jasmine": "~2.5.53", “@types/jasminewd2”：“~2.0.2”，“@types/jquery”：“^3.3.0”，“@types/node”：“~6.0.60”，“codelyzer”：“~3.2。 0”、“jasmine-core”：“~2.6.2”、“jasmine-spec-reporter”：“~4.1.0”、“karma”：“~1.7.0”、“karma-chrome-launcher”： "~2.1.1", "karma-cli": "~1.0.1", "karma-coverage-istanbul-reporter": "^1.2.1",“karma-jasmine”：“~1.1.0”，“karma-jasmine-html-reporter”：“^0.2.2”，“量角器”：“^5.3.2”，“ts-node”：“~3.2 .0", "tslint": "~5.7.0", "typescript": "~2.3.3" } }

标签： htmlcssangular

解决方案

实现 Form-Wizard 的最佳方法之一是使用 Angular Material Stepper。使用步进器的详细信息在这里。

要使用材料，请首先按照以下步骤操作：

第 1 步：安装 Angular Material 和 Angular CDK

npm install --save @angular/material @angular/cdk

在终端中运行此命令。

第二步：导入组件模块。在您的 App.module.ts 中导入所需的材料模块。

import {MatButtonModule, MatStepperModule,} from '@angular/material';

@NgModule({
  ...
  imports: [MatButtonModule, MatStepperModule,],
  ...
})
export class AppModule { }

在 AppModule 中导入所有需要的材质模块。可用选项在这里

第 3 步：包括一个主题。需要包含一个主题才能将所有核心和主题样式应用于您的应用程序。

如果您使用的是 Angular CLI，请将其添加到 styles.css

@import "~@angular/material/prebuilt-themes/indigo-pink.css";

有关主题指南，请参阅此

第 4 步（可选）：添加材质图标。它用于包含图标。

对于图标，请在 index.html 中链接以下样式表

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

在这里找到所有可用的图标

现在对于步进器或表单向导，这里有一个Stackblitz 演示

推荐阅读