简介
angular-schema-form 是一个使用 JSON Schema 来自动生成 Angular 表单的库。它使用了 AngularJS 的表单验证和样式系统，同时提供了可扩展的模板系统。
在这篇文章中，我们将会深入探讨如何使用 angular-schema-form 来创建表单，并给出一些示例代码。
安装
首先，我们需要安装 angular-schema-form。可以通过 npm 来进行安装：
npm install angular-schema-form --save
使用
引入依赖
在使用之前，我们需要在应用程序中引入 angular-schema-form 依赖。在 HTML 文件中添加以下代码：
<script src="node_modules/angular-schema-form/dist/schema-form.min.js"></script> <script src="node_modules/angular-sanitize/angular-sanitize.min.js"></script>
并在 Angular 模块中添加以下依赖：
angular.module('myApp', ['schemaForm']);创建表单
接下来，我们可以开始创建表单了。首先需要定义一个 JSON Schema，然后使用 sf-schema-form 指令来渲染表单。
<sf-schema-form schema="mySchema" form="myForm"></sf-schema-form>
在控制器中定义 mySchema 和 myForm 变量：
-- -------------------- ---- -------
--------------- - -
----- ---------
----------- -
----- - ----- -------- --
---- - ----- -------- -
-
--
------------- - -
-------
-----
--这里，我们定义了一个包含 name 和 age 字段的简单表单。$scope.myForm 变量用于定义表单中显示的字段。
自定义模板
angular-schema-form 提供了可扩展的模板系统。我们可以使用 sfDecoratorProvider 来自定义表单的外观。
angular.module('myApp').config(function(sfDecoratorProvider) {
sfDecoratorProvider.addMapping('bootstrapDecorator', 'myCustomDecorator.html');
});在 myCustomDecorator.html 文件中定义自己的模板：
<div class="form-group">
<label class="control-label" ng-show="showTitle()">{{form.title}}</label>
<div ng-repeat="field in form.items" ng-class="{\'has-error\': showError(field)}">
<sf-field form="field"></sf-field>
<span class="help-block" ng-show="showError(field)">{{getError(field)}}</span>
</div>
</div>这里，我们使用 Bootstrap 样式来美化表单。
表单验证
angular-schema-form 使用 AngularJS 的表单验证机制来进行表单验证。通过 $valid 和 $invalid 属性可以判断表单是否合法。
<form name="myForm" sf-schema="mySchema"> <button type="submit" ng-disabled="myForm.$invalid">Submit</button> </form>
如果表单不合法，则提交按钮会被禁用。
总结
angular-schema-form 是一个非常强大的库，可以大大简化 Angular 表单的开发。通过本文的介绍，你应该已经掌握了如何使用它来创建表单，并能够进行自定义模板和表单验证。
示例代码：https://github.com/json-schema-form/angular-schema-form/tree/master/examples
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/34250