简介
angular2-wizzy 是一个用于 Angular2+ 的表单向导库。它可以为你快速建立一个表单向导，并且有多种自定义选项。
它返回的是一个表单向导组件，并且可以很容易地集成到你的应用程序中。在使用过程中，经常需要配置向导的每一步，绑定数据和根据不同的步骤验证数据。
安装
从 NPM 安装它:
npm install angular2-wizzy
在您的组件中导入它（请注意，以下版本须相等）：
import { WizzyWizardComponent, WizzyStepComponent, WizzyStepHeaderComponent } from 'angular2-wizzy';使用
现在，让我们来看一下如何使用 angular2-wizzy。
1. HTML：
在你的 HTML 中定义这 3 个标签：
-- -------------------- ---- -------
------------- --------
----------- ----------- ---
------- - ------------
-------------
----------- ----------- ---
------- - ------------
-------------
----------- ----------- ---
------- - ------------
-------------
---------------在第一步和第二步中添加一些表单元素和一些验证器：
-- -------------------- ---- -------
----------- ----------- ---
----- ----------------------- -----------
-----
--------------------
------ ----------- -----------------------
---- ------------- ------------------------------------ -- -------------------------------
------- -----
------
------
-----
------- ----------------------- --------------------------------------------
------
-------
-------------
----------- ----------- ---
----- ----------------------- -----------
-----
---------------------
------ ------------ ------------------------
---- ------------- ------------------------------------- -- --------------------------------
------- ------
------
------
-----
------- ---------------------------------------------
------- ----------------------- --------------------------------------------
------
-------
-------------请注意，我们添加了 formGroup 和 formControlName 指令来绑定表单元素并设置验证器。
2. TypeScript：
现在，在你的组件的 TypeScript 中创建两个表单元素（表单 1 和表单 2），并为它们创建相应的表单组建：
-- -------------------- ---- -------
------ - ---------- ------- --------- - ---- ----------------
------ - ---------- ------------ ---------- - ---- -----------------
------ - -------------------- - ---- -----------------
------------
--------- -------------------
------------ --------------------------------
---------- --------------------------------
--
------ ----- ----------- ---------- ------ -
-------------------- ------- ---------------------
--------- - --- -----------
----- --- --------------- ----------------------
---
--------- - --- -----------
------ --- --------------- --------------------- ------------------
---
------------- --
----------- ---- --
-3. 完成
现在，运行应用程序并看看表单最终外观。
4. 直接使用
如果只需要使用组建，可以在你的 AppModule 中加入以下代码：
-- -------------------- ---- ------- ------ - -------- - ---- ---------------- ------ - ----------------- - ---- ----------------- ------ - ------------ - ---- ------------------ ----------- -------- --------------- ------------------- ------------- --------------- ---------- -------------- -- ------ ----- --------- --
现在，我们已经成功地使用了 angular2-wizzy！快去建立一个属于你自己的表单向导吧！
附：示例代码
以下是上面提到的示例代码。
HTML
-- -------------------- ---- -------
-------- -------------------
------------- --------
----------- ----------- ---
----- ----------------------- -----------
-----
--------------------
------ ----------- -----------------------
---- ------------- ------------------------------------ -- -------------------------------
------- -----
------
------
-----
------- ----------------------- --------------------------------------------
------
-------
-------------
----------- ----------- ---
----- ----------------------- -----------
-----
---------------------
------ ------------ ------------------------
---- ------------- ------------------------------------- -- --------------------------------
------- ------
------
------
-----
------- ---------------------------------------------
------- ----------------------- --------------------------------------------
------
-------
-------------
----------- ----------- ---
------- - ------------
-----
------- ---------------------------------------------
------- --------------------------------------
------
-------------
---------------TypeScript
-- -------------------- ---- -------
------ - ---------- ------- --------- - ---- ----------------
------ - ---------- ------------ ---------- - ---- -----------------
------ - -------------------- - ---- -----------------
------------
--------- -------------------
------------ --------------------------------
---------- --------------------------------
--
------ ----- ----------- ---------- ------ -
-------------------- ------- ---------------------
--------- - --- -----------
----- --- --------------- ----------------------
---
--------- - --- -----------
------ --- --------------- --------------------- ------------------
---
------------- --
----------- ---- --
-CSS
.error {
color: red;
}总结
angular2-wizzy 是一个强大的 Angular2+ 表单向导库，在复杂的表单场景中给出了很大的帮助。当你需要一个表单向导时，确保你尝试使用 angular2-wizzy。它极易定制，而且可以提供多种选项，从而按照您的需求创建一个表单向导。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600559e181e8991b448d76cc