ng2-input-forms 是一个开源的 Angular 2 或以上版本的 npm 包，用于快速构建表单和输入控件。本篇文章将会为大家详细介绍 ng2-input-forms 的使用方法和具体操作步骤。
安装
在 Angular 项目中使用 ng2-input-forms 需要进行安装并添加依赖：
--- ------- --------------- ------
用法
导入
在需要使用 ng2-input-forms 的组件中导入 InputFormModule：
------ - -------- - ---- ----------------
------ - ------------- - ---- ----------------------------
------ - ----------- - ---- -----------------
------ - --------------- - ---- ------------------
-----------
-------- -
--------------
------------
---------------
--
------------- - -- ---- ---------- ---- -- --
---------- ---
---------- --
--
------ ----- --------- - -表单
在模板 HTML 中使用 <ng2-input-form> 标签，设置表单内需要的输入控件：
--------------- -------------------------------------- ------ ----------- --------------- ------- -------- ------------------ ------ --------------- --------------- ------- -------- ----------------- ------- ------------------------- -----------------
设置 (emitFormData) 事件，当表单提交时触发。表单数据将会以对象形式传递到 onFormSubmit 函数中。
---------------------- - ---------------------- -
输入控件
ng2-input-forms 提供了多种类型的输入控件。以下是一些示例。
文本框
使用 <input> 标签创建文本框：
------ ----------- --------------- ------- -------- ------------------
ngModel 是 angular 的 Form 功能相关的东西，可以从文本框中获取值。
密码输入框
类型设置为 password 即可创建一个密码输入框：
------ --------------- --------------- ------- -------- -----------------
文本域
使用 <textarea> 标签创建文本域：
--------- -------------- -------------------
单选框
使用 <input type="radio"> 标签创建单选框。需要指定相同的 name 值：
------------- ------------ ------- ------------- ------------- ---------- ------------- ------------ ------- ------------- --------------- ----------
多选框
使用 <input type="checkbox"> 标签创建多选框：
------------- --------------- ------- ---------------- -------------- ---------- ------------- --------------- ------- ---------------- -------------- ---------- ------------- --------------- ------- ---------------- ------------ ---------
下拉菜单
使用 <select> 和 <option> 创建下拉菜单：
------- ------- --------------- ------- ------------------------- ------- ------------- ------------------- ------- ------------------------- ---------
输入控件验证
ng2-input-forms 提供了多种验证规则来验证输入控件。验证规则通过添加到输入控件的属性上实现。
必填项
在输入控件标签中添加 required 属性即可设置该输入控件为必填项。
------ ----------- ------- --------------- ---------
如果没有输入值则会提示 "This field is required"。
最小值/最大值
在输入控件标签中添加 min 和 max 属性即可设置该输入控件的最小值和最大值。
------ ------------- ------- ---------- ------- ----------
邮箱格式
在输入控件标签中添加 email 属性即可设置该输入控件为邮箱格式。
------ ------------ ------- ------------ ------
自定义验证规则
通过设置自定义验证器函数验证输入控件。自定义验证器函数接受一个输入控件的操作对象作为参数，必须返回一个由键值对构成的对象，表示验证失败的原因。
-------- ------------------------ ------------ -
-- ---------------------------------- -
------ - ---------------- ---- --
-
-
------ ----------- ------- ----------- ------------------------------ ------ -------------------------------
---- --------------------------------------------- -------------结束语
ng2-input-forms 可以非常方便地创建 Angular 表单和输入控件。本篇文章介绍了 ng2-input-forms 的基本使用方法和输入控件验证规则，希望对前端开发人员有所帮助。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/600573df81e8991b448e9c7a