主要内容
- 第一节 - 创建最简单的输入框
- 第二节 - 添加简单的验证功能
- 第三节 - 显示验证失败的错误信息
- 第四节 - 创建表单
- 第五节 - ngModelGroup简介
- 第六节 - 表单添加验证状态样式
- 第七节 - 表单控件的状态
- 第八节 - 使用单选控件
- 第九节 - 使用多选控件
阅读须知
本教程的开发环境及开发语言：
基础知识
Angular CLI 基本使用
- 安装 Angular CLI (可选)
--- ------- -- ------------
- 创建新的项目
-- --- ------------
- 启动本地服务器
-- ------------ -- -----
Angular Forms 简介
Angular 4 中有两种表单：
- Template Driven Forms - 模板驱动式表单 (类似于 AngularJS 1.x 中的表单 )
- Reactive Forms - 响应式表单
本文主要介绍 Template Driven Forms (模板驱动式表单) 的基础知识，相关的知识点会以问答的形式进行介绍。
第一节 - 创建最简单的输入框
如何实现双向绑定？
在 Angular 表单中，我们通过 ngModel 指令来实现双向绑定。
------ - --------- - ---- ----------------
------------
--------- -----------
--------- -
------ ----------- -----------------------
------------
--
--
------ ----- ------------ -
-------- - ------------
-
第二节 - 添加简单的验证功能
如何为表单控件添加验证功能？
目前 Angular 支持的内建 validators 如下：
- required - 设置表单控件值是非空的
- email - 设置表单控件值的格式是 email
- minlength - 设置表单控件值的最小长度
- maxlength - 设置表单控件值的最大长度
- pattern - 设置表单控件的值需匹配 pattern 对应的模式
接下来我们来添加最简单的 必填 校验。
------ - --------- - ---- ----------------
------------
--------- -----------
--------- -
------ ----------- ----------- -----------------------
------------
--
--
------ ----- ------------ -
-------- - ------------
-
如何判断表单控件是否通过验证？
在 Angular 中，我们可以通过 #userName="ngModel" 方式获取 ngModel 对象，然后通过 userName.valid 判断表单控件是否通过验证。
------ - --------- - ---- ----------------
------------
--------- -----------
--------- -
------ ----------- ----------- ---------------------- --------------------
------------------
--
--
------ ----- ------------ -
-------- - ------------
-
第三节 - 显示验证失败的错误信息
如何显示验证失败的错误信息？
在 Angular 中，我们可以通过 #userName="ngModel" 方式获取 ngModel 对象，然后通过该对象的 errors 属性，来获取对应验证规则 (如 required, minlength 等) 的验证状态。
------ - --------- - ---- ----------------
------------
--------- -----------
--------- -
------ ----------- ----------- ------------- ---------------------- --------------------
----
---- -----------------------------------------------
---- -----------------------------------
---------- ----------------------------------------------------
-------------------------------------------
------
--
--
------ ----- ------------ -
-------- - ------------
-
第四节 - 创建表单
如何使用表单？
在 Angular 中，我们可以使用熟悉的 <form> 标签来创建表单。
------ - --------- - ---- ----------------
------------
--------- -----------
--------- -
------
------ ----------- ----------- ------------- --------------- ---------------------- --------------------
----
---- -----------------------------------------------
---- -----------------------------------
---------- ----------------------------------------------------
-------------------------------------------
------
------- -------------------------
---------------
--
--
------ ----- ------------ -
-------- - ------------
-需要注意的是，在使用 <form> 标签后，我们的 username 输入框，必须添加 name 属性。
如何获取表单提交的值？
在 Angular 中，我们可以通过 #loginForm="ngForm" 方式获取 ngForm 对象，然后通过 loginForm.value 来获取表单的值。
------ - --------- - ---- ----------------
------------
--------- -----------
--------- -
----- ------------------- ---------------------------------------
------ ----------- ----------- ------------- --------------- ---------------------- --------------------
----
---- -----------------------------------------------
---- -----------------------------------
---------- ----------------------------------------------------
-------------------------------------------
------
------- -------------------------
----------------- - ------
---------------
--
--
------ ----- ------------ -
-------- - ------------
--------------- -
-------------------
-
-第五节 - ngModelGroup简介
ngModelGroup 有什么作用？
ngModelGroup 指令是 Angular 表单中提供的另一特殊指令，可以对表单输入内容进行分组，方便我们在语义上区分不同性质的输入。例如联系人的信息包括姓名及住址，现在需对姓名和住址进行精细化信息收集，姓名可精细化成姓和名字，地址可精细化成城市、区、街等。
------ - --------- - ---- ----------------
------------
--------- -----------
--------- -
----- ------------------- ---------------------------------------
--------- --------------------
------ ----------- ----------- ------------- --------------- ---------------------- --------------------
----
---- -----------------------------------------------
---- -----------------------------------
---------- ----------------------------------------------------
-------------------------------------------
------
------ --------------- ---------- ----------------
---------------------------
------- -------------------------
----
----------------- - ------
-------
--
--
------ ----- ------------ -
-------- - ------------
--------------- -
-------------------
-
-以上代码成功运行后，{{loginForm.value | json}} 的输出结果：
- ------- - ----------- ------------ ----------- ----- - -
第六节 - 表单添加验证状态样式
如何为表单添加验证状态样式信息？
在 Angular 表单中，若验证通过则会在表单控件上添加 ng-valid 类，若验证失败则会在表单控件上添加 ng-invalid 类。
------ - --------- - ---- ----------------
------------
--------- -----------
------- --
---------------- -
------- --- ----- ----
-
-------------- -
------- --- ----- ------
-
-
--
--------- -
----- ------------------- ---------------------------------------
--------- --------------------
------ ----------- ----------- ------------- --------------- ---------------------- --------------------
----
---- -----------------------------------------------
---- -----------------------------------
---------- ----------------------------------------------------
-------------------------------------------
------
------ --------------- ----------- ---------- ----------------
---------------------------
------- -------------------------
----
----------------- - ------
-------
--
--
------ ----- ------------ -
-------- - ------------
--------------- -
-------------------
-
-第七节 - 表单控件的状态
表单控件除了 valid 状态外，还包含哪些状态？
在 Angular 中表单控件有以下 6 种状态，我们可以通过 #userName="ngModel" 方式获取 ngModel 对象，进而获取控件的状态信息。具体状态如下：
- valid - 表单控件有效
- invalid - 表单控件无效
- pristine - 表单控件值未改变
- dirty - 表单控件值已改变
- touched - 表单控件已被访问过
- untouched - 表单控件未被访问过
------ - --------- - ---- ----------------
------------
--------- -----------
------- --
---------------- -
------- --- ----- ----
-
-------------- -
------- --- ----- ------
-
-
--
--------- -
----- ------------------- ---------------------------------------
--------- --------------------
------ ----------- ----------- ------------- --------------- ---------------------- --------------------
----
------------------------------------ - ----------
---------------------------------------- - ----------
------------------------------------------ - ------------
------------------------------------ - ------------
---------------------------------------- - -------------
-------------------------------------------- - -------------
---- -----------------------------------------------
---- -----------------------------------
---------- ----------------------------------------------------
-------------------------------------------
------
------ --------------- ----------- ---------- ----------------
---------------------------
------- -------------------------
----
----------------- - ------
-------
--
--
------ ----- ------------ -
-------- - ------------
--------------- -
-------------------
-
-第八节 - 使用单选控件
如何添加单选控件？
在 Angular 中，我们通过 <input name="***" type="radio"> 方式添加单选控件。
------ - --------- - ---- ----------------
------------
--------- -----------
--------- -
----- --------------------
----------
---- ----------- ------- -- -----------
------ ------------------- -------------- ---------- ----------- ----------------- -------------
------ ----------------------------------------
--------------
----
----------------- - ------
-------
--
--
------ ----- ------------ -
-------- - ------- ------ -------
-第九节 - 使用多选控件
如何添加多选控件？
在 Angular 中，我们通过 <select name="***"> 方式添加多选控件。
------ - --------- - ---- ----------------
------------
--------- -----------
--------- -
----- --------------------
----------
------- -------------- ------------------------
------- ----------- ------- -- ---------- ------------------
-----------
---------
---------
----
----------------- - ------
-------
--
--
------ ----- ------------ -
-------- - ------- ------ -------
-如何添加必填验证？
------ - --------- - ---- ----------------
------------
--------- -----------
------- --
----------------- - ----------- -
-------- ---- ---------- ---- ---- ----- ------------ -------- --------------------
----------
-----
------- -------------- ------------------- ------------
------- ----------- ------- -- ---------- ------------------
-----------
---------
---------
--------
------
----
----------------- - ------
--
--
------ ----- ------------ -
-------- - ---------- ------ -------
-</-->