介绍
ng-data-annotation 是一个 AngularJS 的服务，它可以根据约定的规则对 JSON 数据进行注解，并根据这些注解自动生成 HTML 表单。使用它可以使开发者不必手动创建表单，而是能够快速地根据数据模型自动生成表单页面。这样，我们就可以避免手写表单时，出现的表单验证、数据加工等繁琐的工作。
安装
使用 npm 安装 ng-data-annotation：
npm install ng-data-annotation --save
使用
要使用 ng-data-annotation，我们需要先在 AngularJS 项目的依赖中注入它：
var app = angular.module("myApp", ["ngDataAnnotation"]);在 HTML 文件中，我们可以使用指令 data-annotation-form，将注解后的数据传递给该指令即可。
<div data-annotation-form="myData"></div>
在 JavaScript 代码中，我们定义一些数据模型，然后将它们传递给 ng-data-annotation 的服务方法 ngDataAnnotationService.annotate()
-- -------------------- ---- -------
------------------------ ---------- -------------------------- ---------------- ------------------------ -
------------- - -
----- ---
---- --
------ ---
------- ---
----- ---
--------- --
--
------------- - -
----- ---------
----------- -
----- - ----- --------- ------ ------ --
---- - ----- ---------- ------ ----- --
------ - ----- --------- ------ ------- --
------- -
----- ---------
------ ---------
----- -------- ---------
--
----- -
----- ---------
------ -------
----- ----- ------ ---------- ---- ---------
--
--------- - ----- --------- ------ ---------- -
--
--------- -------- --------
--
----------------------------------------------- ---------------
----我们在 controller 中定义了一个 $scope.schema，它是一个对象，规定了数据模型的属性和类型，以及表单中每个表单控件的标签。然后，我们通过 $scope.ngDataAnnotationService() 方法来将数据模型和 schema 联系起来，生成注释并构建表单。
指令
在 HTML 代码中，我们可以使用以下指令：
data-annotation-form
这个指令将数据模型映射到一个表单上。
<div data-annotation-form="myData"></div>
data-annotation-control
这个指令允许开发者手动指定数据模型中的属性被映射到哪个表单控件上。
<input type="text" data-annotation-control="name" ng-model="myData.name">
验证
通过添加验证规则，我们可以验证表单中的输入是否符合预期。
-- -------------------- ---- -------
------------- - -
----- ---------
----------- -
----- - ----- --------- ------ ------- ---------- -- ---------- -- --
---- - ----- ---------- ------ ------ -------- -- --
------ - ----- --------- ------ -------- -------- -------------------------------------------------- --
------- -
----- ---------
------ ---------
----- -------- ---------
--
----- -
----- ---------
------ -------
----- ----- ------ ---------- ---- ---------
--
--------- - ----- --------- ------ ---------- -
--
--------- -------- --------
--在代码中添加上述 schema，在我们的表单中就能够自动验证输入的合法性。并在提交表单时，自动收集表单数据模型。
<div data-annotation-form="myData" data-annotation-validation></div>
总结
ng-data-annotation 允许我们通过少量的配置，就可以自动生成具有良好规范和验证功能的表单。并且提供了极为方便的表单设置，可以避免开发者通过手写表单所带来的繁琐的工作。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056cf581e8991b448e6b44