介绍
ng-formly 是一个 AngularJS 表单渲染器，使表单创建变得非常容易。它支持 AngularJS 1.x 和 AngularJS 2.0+。
它是一个小巧、灵活且易于扩展的库，非常适合作为 AngularJS 项目的表单解决方案。它提供了许多现成的表单控件，如文本、数字、日期选择器等，甚至可以扩展自定义的表单控件。
安装
使用 npm 安装 ng-formly：
npm install ng-formly --save
或者手动下载文件，然后引入文件：
<link rel="stylesheet" href="/path/to/formly.css"> <script src="/path/to/formly.js"></script>
基础用法
首先，需要将 ng-formly 引入到您的 AngularJS 应用程序中：
angular.module('myApp', ['formly']);然后，您可以在您的控制器中创建一个表单模型：
$scope.model = {
firstName: '',
lastName: ''
};接下来，您需要定义表单字段的配置：
-- -------------------- ---- -------
------------- - -
-
---- ------------
----- --------
---------------- -
------ ------ ------
------------ ------ ---- ----- ------
--------- ----
-
--
-
---- -----------
----- --------
---------------- -
------ ----- ------
------------ ------ ---- ---- ------
--------- ----
-
-
--最后，在 HTML 中，您可以使用 ng-formly-directive 指令渲染您的表单：
<form ng-formly-form="fields" ng-model="model"></form>
现在您已经创建了一个简单的 ng-formly 表单。当您提交表单时，表单数据将存储在 $scope.model 中。
高级用法
自定义表单控件
您可以使用 type 属性自定义表单控件。您可以使用内置的表单控件或自定义控件。
下面是内置的表单控件之一：选项卡式控件。您可以在 type 属性中设置 tabs 来使用它：
-- -------------------- ---- -------
-
---- -------
----- -------
---------------- -
----- -
-
------ ---- ---
------- -
-
---- ------------
----- --------
---------------- -
------ ------ ------
------------ ------ ---- ----- ------
--------- ----
-
-
-
--
-
------ ---- ---
------- -
-
---- -----------
----- --------
---------------- -
------ ----- ------
------------ ------ ---- ---- ------
--------- ----
-
-
-
-
-
-
-这将创建一个选项卡式的表单。
您还可以创建自定义的表单控件。有两种方法可以创建一个自定义表单控件：使用 formlyConfigProvider.setType() 或创建一个独立的指令。
使用 formlyConfigProvider.setType()：
-- -------------------- ---- -------
------------------------------------------------------------- -
------------------------------
----- ----------------
--------- -------- ------------------------------- -
-------- --------------- - ----------------- -
-------- ---------------- ------ -- ----------- ----------------------------------- -
------------
-------- ------------------ ---------------------
--------------- -
---------------- -
-------- -
---- -- ----- ------- ---------
---- -- ----- ---------
---- -- ----- ---------
---- -- ----- ----------
---- -- ----- --------
-
-
-
---
---如果您不想使用 formlyConfigProvider，您也可以创建一个独立的指令：
-- -------------------- ---- -------
-------------------------------------------------- ---------- -
------ -
--------- ----
------ -
------ ----
-------- ---
--
--------- -------- ------------------ -
-------- --------------- - ----------------- -
-------- ---------------- ------ -- -------- ----------------------------------- -
-----------
--
---表单验证
ng-formly 提供了内置的表单验证并支持自定义验证器。使用内置验证器非常简单。例如，您可以使用 required 属性来验证表单字段是否为空：
-- -------------------- ---- -------
-
---- ------------
----- --------
---------------- -
------ ------ ------
------------ ------ ---- ----- ------
--------- ----
-
-ng-formly 还支持设置自定义验证器。您可以在模板选项中使用 validators 属性来指定验证器。例如，以下是一个自定义验证器，它验证输入的数字是否是偶数：
-- -------------------- ---- -------
-
---- ------
----- --------
---------------- -
------ ---------
----- ---------
----------- -
----- -------------------- ------------ -
--- ----- - ----------- -- -----------
------ ----- - - --- --
-
-
-
-示例代码
这里是一个完整的示例代码，包括自定义控件、表单验证等：
-- -------------------- ---- -------
--------- -----
----- ---------------
------
---------------- ------------
----- ----------------
----- ---------------- -----------------------------------------------------------------------
----- ---------------- ----------------------------------------------------------
------- ----------------------------------------------------------------------------
------- -----------------------------------------------------------------
--------
----------------------- -----------
-- -------
-------------------------------------- -
------------------------------
----- ----------------
--------- -------- ------------------------------- -
-------- --------------- - ----------------- -
-------- ---------------- ------ -- ----------- ----------------------------------- -
------------
-------- ------------------ ---------------------
--------------- -
---------------- -
-------- -
---- -- ----- ------- ---------
---- -- ----- ---------
---- -- ----- ---------
---- -- ----- ----------
---- -- ----- --------
-
-
-
---
--
----------------------- ---------------- -
------------ - -
---------- ---
--------- ---
---- --
-------- --
--
------------- - -
-
---- ------------
----- --------
---------------- -
------ ------ ------
------------ ------ ---- ----- ------
--------- ----
-
--
-
---- -----------
----- --------
---------------- -
------ ----- ------
------------ ------ ---- ---- ------
--------- ----
-
--
-
---- ------
----- --------
---------------- -
------ ---------
----- ---------
----------- -
----- -------------------- ------------ -
--- ----- - ----------- -- -----------
------ ----- - - --- --
-
-
-
--
-
---- ----------
----- ----------------
---------------- -
------ ----------
--------- ----
-
-
--
---
---------
-------
----- -------------------------
---- ------------------
------------- ---------
----- ----------------------- ---------------- ----------------------- ------------
---- -------------------
------ --------------- -------------------- ------------
---- -----------------
------ ----------- -------------------- -------------------------- ------------------ ---- ----- ----- ------------
------
------
---- -------------------
------ --------------- ------------------- ------------
---- -----------------
------ ----------- -------------------- ------------------------- ------------------ ---- ---- ----- ------------
------
------
---- -------------------
------ --------------- -----------------------------
---- -----------------
------ ------------- -------------------- ---------------------
---- -------------------- -------------------------------
---- --------------------- ------ ---- -- -----------
------
------
------
---- -------------------
------ --------------- ------------------------------
---- -----------------
------- ------------------------ -------------------- ------------
------- --------------- - ----------------
------- ---------------- ------ -- ----- -- ----- ------- --------- ---- -- ----- --------- ---- -- ----- --------- ---- -- ----- ---------- ---- -- ----- ---------- ---------------------------------------
---------
------
------
---- -------------------
---- ---------------------- ----------
------- ------------- ---------- ------------ ------------------------------------------------
------
------
-------
------
-------
-------总结
使用 ng-formly，您可以轻松创建表单并自定义表单控件。它提供了内置的表单验证器和扩展性，是一个非常强大而灵活的表单解决方案。如果您正在使用 AngularJS 创建一个 Web 应用程序并需要一个表单库，ng-formly 是一个值得尝试的选择。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/ng-formly