介绍
ng2-forms是一个npm包，用于Angular 2+项目中的表单数据处理和验证。它提供了一种简单、可扩展的方式来处理表单数据和验证表单的输入。ng2-forms是一个基于reactive programming（响应式编程）和rxjs（响应式JavaScript库）的解决方案。本文将介绍如何使用ng2-forms来构建表单，如何添加验证器以及如何处理表单数据。
安装
你可以使用npm来安装ng2-forms，可以通过下面的命令进行安装：
npm install ng2-forms
基本使用
首先，需要在模块中导入FormsModule和ReactiveFormsModule模块：
-- -------------------- ---- -------
------ - ------------ ------------------- - ---- -----------------
-----------
-------- -
--------------
------------
-------------------
--
-----
--接下来，在组件中定义一个FormGroup对象：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ---------- ----------- - ---- -----------------
------------
-----
--
------ ----- ----------- -
------- ----------
------------- -
----------- - --- -----------
----- --- --------------
------ --- -------------
---
-
---------- -
-------------------------------
-
-在这个组件中，我们定义了一个名为myForm的FormGroup对象，并且添加了两个名为name和email的FormControl对象。
在模板中，可以使用formGroup指令绑定一个FormGroup对象，并使用formControlName指令绑定FormControl对象：
-- -------------------- ---- -------
----- -------------------- ------------------------
------------
------ ----------- -----------------------
--------
-------------
------ ------------ ------------------------
--------
------- -----------------------------
-------在这个例子中，ngSubmit事件监听表单的提交，当表单提交时，调用onSubmit()方法，该方法打印表单数据。
添加验证器
ng2-forms提供了一些内置的验证器，例如required、minLength和maxLength。你可以通过传递验证器函数来添加自定义验证器。
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ---------- ------------ ---------- - ---- -----------------
------------
-----
--
------ ----- ----------- -
------- ----------
------------- -
----------- - --- -----------
----- --- --------------- -
--------------------
-----------------------
---
------ --- --------------- -
--------------------
----------------
--
---
-
---------- -
-------------------------------
-
-在这个示例中，我们为name FormControl添加了一个验证器数组，它包含了required和minLength(5)验证器。同时，我们为email FormControl添加了一个验证器数组，它包含了required和email验证器。
当提交表单时，如果任何一个验证器未通过，该表单将被视为无效，你可以使用valid属性来检查表单是否有效。
-- -------------------- ---- -------
----- -------------------- ------------------------
------------
------ ----------- ---------------------- -----------------------------------------------
---- ------------------------------------ --------------
---- -- --------
------
--------
-------------
------ ------------ ----------------------- ------------------------------------------------
---- ------------------------------------- --------------
----- -- --------
------
--------
------- ------------- ------------------------------------------
-------在模板中，我们使用invalid属性来检查控件是否无效，如果无效将添加独立的css类。如果你想要向用户显示特定的错误消息，可以使用*ngIf指令来进行特定域的错误处理。
处理表单数据
当你提交一个表单时，你需要根据你的项目需求处理表单数据。如果你运行的是Angular 2或以上版本，那么你可能已经使用了[(ngModel)]来绑定输入元素和组件的属性。
ng2-forms不支持这个双向绑定，但它提供了一种响应式的方式来处理表单数据。
在组件中，你可以访问一个FormGroup的value属性来获得表单数据。
onSubmit() {
console.log(this.myForm.value);
}在这个方法中，我们调用console.log()方法并打印出myForm FormGroup的value属性。
你还可以访问单个FormControl的value属性来获得表单数据。
onSubmit() {
console.log(this.myForm.get('name').value);
console.log(this.myForm.get('email').value);
}在这个方法中，我们调用console.log()方法并打印出myForm组件中的name和email FormControl的value属性。
总结
ng2-forms提供了构建具有实时验证和响应式数据处理的表单的简单方式。使用ng2-forms，你可以添加自定义验证器、访问表单数据并做出适当的处理。在开发Angular 2+应用程序时，ng2-forms是一个必不可少的工具包。
示例代码
请访问ng2-forms github上的示例代码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600567de81e8991b448e410a