ngx-archwizard 是一个 Angular 的向导组件库，它提供了一种简单、易于使用的方法来创建向导或多步骤表单。在这篇文章中，我们将详细介绍如何使用 ngx-archwizard。
安装
使用 npm 在 Angular 项目中安装 ngx-archwizard：
npm install ngx-archwizard --save
创建向导
使用 ngx-archwizard 快速创建一个向导非常简单。假设我们有三个步骤（步骤1、步骤2 和 步骤3），这里是创建向导的步骤：
- 在 app.module.ts 中，导入 ArchwizardModule，并将其添加到 imports 数组中：
-- -------------------- ---- -------
------ - ---------------- - ---- -----------------
---
-----------
------------- -
---
--
-------- -
--------------
------------
-----------------
--
---
--
------ ----- --------- - -- 在组件文件中，编写向导的 HTML 代码：
-- -------------------- ---- -------
--------
------------ ----------- ---
---------- -- ---- ------
--------------
------------ ----------- ---
---------- -- ---- ------
--------------
------------ ----------- ---
---------- -- ---- ------
--------------
---------- 在组件的 TypeScript 文件中添加一些样式：
@include wizard-steps(); @include wizard-step-core();
- 运行应用程序，您将看到一个基本的向导，用于演示如何使用 ngx-archwizard。
向导设置
ngx-archwizard 提供了一些选项来自定义向导的外观和行为。以下是可用的选项之一：
NavigationMode
NavigationMode 可以设置步骤完成后的导航方式，默认为 rigid，表示只有在先前的步骤被验证和标记为有效的情况下才能访问下一个步骤。如果将其更改为 free，则用户可以在未完成步骤时导航到其它步骤。
<wizard [navigationMode]="'free'">
NextStepButtonText
NextStepButtonText 定义向导中下一个步骤按钮上的文本：
<wizard [nextStepButtonText]="'Next'">
PreviousStepButtonText
PreviousStepButtonText 定义向导中上一个步骤按钮上的文本：
<wizard [previousStepButtonText]="'Previous'">
SkipStepButtonText
SkipStepButtonText 定义了向导中跳过按钮上的文本。如果不想在向导中添加跳过功能，则将 skipStepButtonText 设置为 null。
<wizard [skipStepButtonText]="'Skip'">
FinishStepButtonText
FinishStepButtonText 定义向导中“完成”按钮上的文本。
<wizard [finishStepButtonText]="'Finish'">
在步骤间突出显示导航
在 ngx-archwizard 中，可以通过 stepper 控制当前哪些步骤是激活的。为了使用户知道自己在向导中的位置，可以突出显示它们的导航。
-- -------------------- ---- -------
---------------- --------
-------- ------------------ -
------------------ -
------ ----------------
------------ -----
-
------------------- -
-------- ----------------------------------------------
-
-------- -
-------- --------------------------------------------
-
-示例代码：
-- -------------------- ---- -------
--------
------------ ----------- -- -
------------ -- ---- --------
--------------
------------ ----------- ---
------------ -- ---- --------
--------------
------------ ----------- ---
------------ -- ---- --------
--------------
---------添加表单验证
要在 ngx-archwizard 向导中添加表单验证，可以使用 Angular 表单验证来检查每个步骤的每个字段。
-- -------------------- ---- -------
------- -----------------------------------
-------------
----- -----------------
---- -------------------
------ --------------------- ------------
------ ----------- -------------- ---------------- ------- -------- --
------
---- -------------------
------ ------------------- ------------
------ ----------- ------------- --------------- ------- -------- --
------
-------
--------------
-------------
------- - ------------
--------------
-------------
------- - ------------
--------------
---------在步骤中使用表单模板。 Angular 表单验证应该被用于每一个字段并且 ngForm 指令应该被添加到表单中。最后，在组件中创建一个函数，并将其传递到stepChanged事件中。
-- -------------------- ---- -------
------------- -
--- ------- - -----
----- ---- - --------------------------
----- ------ - ----------------------------- --------
--- ---- - - -- - - -------------- ---- -
-- --------------------------- -
------- - ------
------
-
-
--------------------------------------------------------
-结论
ngx-archwizard 是一个完整的、高度可定制的向导/步骤组件库。它非常适合创建多步骤的表格，以及在项目中实现向导的其他功能。在这篇文章中，我们探讨了 ngx-archwizard 的安装，如何创建向导，如何使用向导设置，以及将表单验证添加到重要的步骤中。希望这篇文章可以帮助你更好地理解 ngx-archwizard，并帮助你在项目中使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055fbf81e8991b448dd091