1. 简介
ng-isti 是一个 AngularJS 模块，它使用了 Isti 库，被用于构建可定制的表单。
在本篇文章中，我将会教会大家如何使用这个npm包，并且展示它能够为你带来的好处。
2. 安装
在使用ng-isti之前，首先需要安装它。你可以通过以下命令来完成安装：
npm install ng-isti --save
该命令将会在你的Angular应用中添加ng-isti依赖，并将其添加到你的 package.json 文件中。
3. 用法
使用ng-isti的第一步是将它作为你的Angular模块的依赖添加到你的应用中。例如：
var app = angular.module('myApp', ['ngIsti']);现在，我们可以在我们的HTML代码中使用ng-isti的指令来创建表单：
<form isti-form="formModel" isti-model="formModel" isti-schema="schema"></form>
在上面的代码中，我们使用 isti-form 指令来告诉ng-isti此处我们需要创建一个表单。isti-model 指令用于将表单的值绑定到我们的数据模型中，而 isti-schema 指令用于指定我们的表单结构。
现在，我们需要创建我们的表单结构。请看以下示例：
-- -------------------- ---- -------
--- ------ - -
------- ---------
------------- -
------- -
------- ---------
-------- ----
--
---------- -
------- ---------
-------- -----
------------- -
------- -
------- ---------
-------- ----
--
---------- -
------- ---------
-------- -----
------- ------ -----
-
-
--
---------- -
---------------
-------------
---------
----------------
------------- ----- ------ ------
-
-
-
-上面的代码指定了我们表单的结构。它定义了一个包含三个字段的对象：name, address, 和 hobbies。 address 字段是一个包含了 city 和 country 字段的嵌套对象。 hobbies 是一个包含了单选框的字符串数组。
我们可以将此结构传递给ng-isti来创建表单：
<form isti-form="formModel" isti-model="formModel" isti-schema="schema"></form>
现在我们的表单已经建好了，它被渲染在页面上并且它已经包含了我们在schema定义中指定的字段。
4. 指令
在本节中，我们将探讨一些常用的 ng-isti 指令。
(1) isti-form
该指令表示我们需要创建一个表单。您可以将此指令添加到您的 <form> 标签中：
<form isti-form="formModel" isti-model="formModel" isti-schema="schema"></form>
(2) isti-model
该指令指定表单的值应该绑定到的数据模型。例如：
<form isti-form="formModel" isti-model="formModel" isti-schema="schema"></form>
在这个例子中，我们使用 ng-model 指令来捕捉表单的值并将其绑定到 formModel 变量中。
(3) isti-schema
该指令指定了表单的结构。例如：
<form isti-form="formModel" isti-model="formModel" isti-schema="schema"></form>
在本例中，我们使用了一个JSON对象来指定表单的结构。
(4) isti-submit
该指令用于在用户点击提交按钮时触发一个事件。例如：
<button isti-submit="submit()">提交</button>
在本例中，当用户在表单中填写字段并点击提交按钮时，将会调用 submit 方法。
(5) isti-cancel
该指令用于在用户点击取消按钮时触发一个事件。例如：
<button isti-cancel="cancel()">取消</button>
在本例中，当用户在表单中填写字段并点击取消按钮时，将会调用 cancel 方法。
(6) isti-add
该指令用于添加一个新字段到表单中。例如：
<button isti-add="hobbies">添加爱好</button>
在本例中，当用户点击添加按钮时将会添加一个新字段到 hobbies 数组中。
(7) isti-delete
该指令用于删除表单中的一个字段。例如：
<button isti-delete="hobbies[$index]">删除</button>
在本例中，当用户点击删除按钮时将会从 hobbies 数组中删除当前索引所对应的字段。
5. 总结
在本文中，我们学习了如何使用npm包ng-isti来构建可定制的表单。我们介绍了ng-isti的用法，展示了如何在HTML代码中使用ng-isti的指令，以及如何配置表单结构。我们还深入探讨了ng-isti一些常用的指令，这些指令可以帮助我们为表单添加各种不同的功能。
我希望这篇文章对你有所帮助，并可以帮助你更好地使用ng-isti来构建可定制的表单。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005583f81e8991b448d5702