ng2-input-forms 是一个开源的 Angular 2 或以上版本的 npm 包，用于快速构建表单和输入控件。本篇文章将会为大家详细介绍 ng2-input-forms 的使用方法和具体操作步骤。
安装
在 Angular 项目中使用 ng2-input-forms 需要进行安装并添加依赖：
npm install ng2-input-forms --save
用法
导入
在需要使用 ng2-input-forms 的组件中导入 InputFormModule：
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - ------------- - ---- ----------------------------
------ - ----------- - ---- -----------------
------ - --------------- - ---- ------------------
-----------
-------- -
--------------
------------
---------------
--
------------- - -- ---- ---------- ---- -- --
---------- ---
---------- --
--
------ ----- --------- - -表单
在模板 HTML 中使用 <ng2-input-form> 标签，设置表单内需要的输入控件：
<ng2-input-form (emitFormData)="onFormSubmit($event)"> <input type="text" name="username" ngModel required placeholder="用户名"> <input type="password" name="password" ngModel required placeholder="密码"> <button type="submit">提交</button> </ng2-input-form>
设置 (emitFormData) 事件，当表单提交时触发。表单数据将会以对象形式传递到 onFormSubmit 函数中。
onFormSubmit(formData) {
console.log(formData);
}输入控件
ng2-input-forms 提供了多种类型的输入控件。以下是一些示例。
文本框
使用 <input> 标签创建文本框：
<input type="text" name="username" ngModel required placeholder="用户名">
ngModel 是 angular 的 Form 功能相关的东西，可以从文本框中获取值。
密码输入框
类型设置为 password 即可创建一个密码输入框：
<input type="password" name="password" ngModel required placeholder="密码">
文本域
使用 <textarea> 标签创建文本域：
<textarea name="comment" ngModel></textarea>
单选框
使用 <input type="radio"> 标签创建单选框。需要指定相同的 name 值：
<label><input type="radio" ngModel name="gender" value="Male"> 男性</label> <label><input type="radio" ngModel name="gender" value="Female"> 女性</label>
多选框
使用 <input type="checkbox"> 标签创建多选框：
<label><input type="checkbox" ngModel name="furniture" value="Table"> 桌子</label> <label><input type="checkbox" ngModel name="furniture" value="Chair"> 椅子</label> <label><input type="checkbox" ngModel name="furniture" value="Bed"> 床</label>
下拉菜单
使用 <select> 和 <option> 创建下拉菜单：
<select ngModel name="country"> <option value="China">中国</option> <option value="United States">美国</option> <option value="Japan">日本</option> </select>
输入控件验证
ng2-input-forms 提供了多种验证规则来验证输入控件。验证规则通过添加到输入控件的属性上实现。
必填项
在输入控件标签中添加 required 属性即可设置该输入控件为必填项。
<input type="text" ngModel name="username" required>
如果没有输入值则会提示 "This field is required"。
最小值/最大值
在输入控件标签中添加 min 和 max 属性即可设置该输入控件的最小值和最大值。
<input type="number" ngModel name="age" min="5" max="120">
邮箱格式
在输入控件标签中添加 email 属性即可设置该输入控件为邮箱格式。
<input type="email" ngModel name="email" email>
自定义验证规则
通过设置自定义验证器函数验证输入控件。自定义验证器函数接受一个输入控件的操作对象作为参数，必须返回一个由键值对构成的对象，表示验证失败的原因。
function customValidator(control: FormControl) {
if (!control.value.startsWith('abc')) {
return { 'invalidFormat': true };
}
}
<input type="text" ngModel name="text" [ngModelOptions]="{standalone: true}" [validators]="customValidator">
<div *ngIf="form.controls['text'].invalid">Invalid format!</div>结束语
ng2-input-forms 可以非常方便地创建 Angular 表单和输入控件。本篇文章介绍了 ng2-input-forms 的基本使用方法和输入控件验证规则，希望对前端开发人员有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600573df81e8991b448e9c7a