主要内容
- 第一节 - 创建最简单的输入框
- 第二节 - 添加简单的验证功能
- 第三节 - 显示验证失败的错误信息
- 第四节 - 创建表单
- 第五节 - 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="***">
方式添加多选控件。
------ - --------- - ---- ---------------- ------------ --------- ----------- --------- - ----- -------------------- ---------- ------- -------------- ------------------------ ------- ----------- ------- -- ---------- ------------------ ----------- --------- --------- ---- ----------------- - ------ ------- -- -- ------ ----- ------------ - -------- - ------- ------ ------- -
如何添加必填验证?
------ - --------- - ---- ---------------- ------------ --------- ----------- ------- -- ----------------- - ----------- - -------- ---- ---------- ---- ---- ----- ------------ -------- -------------------- ---------- ----- ------- -------------- ------------------- ------------ ------- ----------- ------- -- ---------- ------------------ ----------- --------- --------- -------- ------ ---- ----------------- - ------ -- -- ------ ----- ------------ - -------- - ---------- ------ ------- -
</-->