前言
随着前端技术的不断发展，Angular已经成为了前端框架中被广泛使用的一种，而@angular/forms也是Angular中重要而且不可或缺的一部分。本文将会深入讲解@angular/forms的使用教程，包括表单验证、自定义控件等知识点。
简介
@angular/forms是Angular中关于表单的模块，提供了常用的表单功能，包括控件（FormControl，FormGroup等）、表单验证、自定义表单控件等。通过@angular/forms，我们可以轻松开发出强大且完整的表单。
安装
安装@angular/forms很简单，只需要在你的项目中执行以下命令即可：
npm install @angular/forms --save
这条命令将会安装最新版本的@angular/forms到你的项目中。
基础用法
FormControl
FormControl表示一个表单控件，可以用来描述一个表单元素。例如：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ----------- - ---- -----------------
------------
--------- -----------
--------- -
------ ---------------------
-- ---------- --
-
--
------ ----- ------------- -
---- - --- ----------------
-上面的代码中，我们定义了一个FormControl，并在模板中将其绑定到了input元素上。当用户在输入框中输入文字时，我们通过绑定的name.value获取到输入框中的内容。
FormGroup
FormGroup表示表单中的一个分组，可以将多个FormControl分为一组，方便我们进行操作。例如：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ---------- ----------- - ---- -----------------
------------
--------- -----------
--------- -
----- ---------------------- ------------------------
------ ---------------------------
------ ---------------------------
------- -------------------------
-------
-
--
------ ----- ------------- -
-------- - --- -----------
--------- --- ----------------
--------- --- ---------------
---
---------- -
---------------------------------
-
-上面的代码中，我们定义了一个FormGroup来分组管理username和password这两个FormControl。我们将userForm绑定到form元素上，并通过formControlName将两个FormControl分配给对应的input元素。当用户输入完毕后，我们可以通过this.userForm.value获取到表单数据。
表单验证
表单验证是表单开发中一个重要的环节。@angular/forms提供了丰富且易用的表单验证方法。例如：
import { FormControl, Validators } from '@angular/forms';
const name = new FormControl('', Validators.required);上面的代码中，我们通过Validators.required定义了一个必填的验证规则，并将其传递给FormControl。
@angular/forms还提供了其他的验证方法，例如email，minLength,maxLength等。当然，我们也可以通过自定义验证器来实现更加灵活的表单验证。
-- -------------------- ---- -------
------ - ----------- - ---- -----------------
-------- ------------------- ------- ---- ------- -
------ --------- ------------ -- -
----- ----- - --------------
-- ------ - --- -- ----- - ---- -
------ -
------ ----
--
- ---- -
------ -----
-
--
-
----- --- - --- --------------- ----------------- -----上面的代码中，我们通过rangeValidator自定义了一个验证器，并在age上使用。当age的值不在5到10之间时，表单验证将会报错。
自定义表单控件
在表单开发中，我们有时候需要自定义表单控件来满足一些特殊需求。@angular/forms提供了自定义表单控件的方法。例如：
-- -------------------- ---- -------
------ - ---------- ---------- - ---- ----------------
------ - --------------------- ----------------- - ---- -----------------
----- ---------------------- - -
-------- ------------------
------------ ------------- -- -----------------
------ ----
--
------------
--------- --------------
--------- ------- ----------------------
---------- ------------------------
--
------ ----- --------------- ---------- -------------------- -
----- - ---
--------- --- - -- -- ---
---------- --- - -- -- ---
----------------- ---- -
---------- - ------
-
-------------------- ---- -
------------- - ---
-
--------------------- ---- -
-------------- - ---
-
-上面的代码中，我们定义了一个MyTextComponent，并将它注册为一个表单控件。我们在template中定义了一个input元素，并通过ngModel绑定了value。在MyTextComponent中，我们通过ControlValueAccessor来实现了双向绑定的功能。
总结
通过本文，我们学习了@angular/forms的基础用法，包括FormControl，FormGroup，表单验证以及自定义表单控件等知识点。@angular/forms为我们提供了一套完整的表单开发解决方案，使得我们能够轻松地开发强大的表单应用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/108026