在前端开发中，表单是不可或缺的一部分。而 Angular 框架下的 Angular Schema Form 是一个强大的表单构建工具。但是对于表单的预览需要自己手写代码，过程较为麻烦。而 angular-schema-form-previewer 包就是为了解决这个问题而被创造出来的。
这篇文章将详细介绍如何使用 angular-schema-form-previewer 包，包括如何安装、如何使用以及使用中需要注意的事项。
安装
在使用 angular-schema-form-previewer 之前，需要先确保系统中已经安装了以下软件：
- Node.js
- npm
安装完成后，在命令行中执行以下命令以安装 angular-schema-form-previewer：
npm install angular-schema-form-previewer --save
通过上述命令，angular-schema-form-previewer 依赖将被安装并添加到项目的 package.json 文件中。
使用
在引入 angular-schema-form-previewer 包之前，需要首先在项目中引入 AngularJS、Angular 和 Angular Schema Form。可以通过以下方式分别进行引入：
-- -------------------- ---- ------- ------- -------------------------------------------------------------------------------------- ------- -------------------------------------------------------------------------------------------- ------- ----------------------------------------------------------------------------------------------- ------- ---------------------------------------------------------------------------------------------------- ------- ------------------------------------------------------------------------------------------------------------
当上述依赖已经被引入后，可以通过以下方式进行 angular-schema-form-previewer 的引入：
<script src="angular-schema-form-previewer.min.js"></script>
引入完 angular-schema-form-previewer 后，需要在项目中定义一个预览器控制器。
app.controller('PreviewerController', ['$scope', function ($scope) {
$scope.previewOptions = {
schema: {},
form: [],
model: {}
};
}]);在预览器控制器中，需要定义一个 $scope 对象，对象包含一个 previewOptions 属性。previewOptions 属性包含下列三个属性：
- schema：要预览的表单的 schema。
- form：要预览的表单的 form。
- model：表单数据模型。
以上三个属性都是必需的，如果没有传入，则预览器将无法正常工作。
在定义好预览器控制器后，需要在 HTML 文件中加入以下代码段：
<div previewer options="previewOptions"></div>
其中，options 属性会包含表单的所有信息。
简单示例
先来看一个简单的、只包含一个文本框的表单预览的示例代码：
<form sf-schema="previewOptions.schema" sf-form="previewOptions.form" sf-model="previewOptions.model"></form> <div previewer options="previewOptions"></div>
通过 sf-schema、sf-form 和 sf-model 指令，可以将 schema、form 和 model 的数据交给 Angular Schema Form 进行渲染。在将数据交给 Angular Schema Form 后，使用 previewer 指令显示预览。
指令参数
除了 options 属性外，previewer 指令还支持一些其他参数，这些参数可以通过 HTML 属性进行设置。
schema
schema 用于指定预览的表单的 schema。可以在 options 中设置 schema 属性，也可以在 HTML 中设置该属性。如果在 HTML 中设置该属性，则需要将 schema 数据以 JSON 格式写入到属性值中。
<div previewer schema='{"type": "object", "properties": {"name": {"type": "string"}}}'></div>form
form 用于指定要预览的表单的 form。可以在 options 中设置 form 属性，也可以在 HTML 中设置该属性。如果在 HTML 中设置该属性，则需要将 form 数据以 JSON 格式写入到属性值中。
<div previewer form='[{"type": "text", "key": "name", "title": "Name"}]'></div>model
model 用于指定要预览的表单的模型数据。可以在 options 中设置 model 属性，也可以在 HTML 中设置该属性。如果在 HTML 中设置该属性，则需要将 model 数据以 JSON 格式写入到属性值中。
<div previewer model='{"name": "张三"}'></div>horizontal
设置表单是否水平显示。默认情况下，表单是垂直显示的。
<div previewer horizontal></div>
layout
设置预览器的布局类型。
<div previewer layout="vertical"></div>
布局类型可以是 vertical（默认）或 horizontal。该选项主要用于确定表单控件的排列方式。
结尾
至此，angular-schema-form-previewer 的使用教程就结束了。希望这篇文章能够对你深入了解 angular-schema-form-previewer 的使用有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005620f81e8991b448df789