表单快速入门

主要内容

  • 第一节 - 创建最简单的输入框
  • 第二节 - 添加简单的验证功能
  • 第三节 - 显示验证失败的错误信息
  • 第四节 - 创建表单
  • 第五节 - ngModelGroup简介
  • 第六节 - 表单添加验证状态样式
  • 第七节 - 表单控件的状态
  • 第八节 - 使用单选控件
  • 第九节 - 使用多选控件

阅读须知

本教程的开发环境及开发语言:

基础知识

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="***"> 方式添加多选控件。

------ - --------- - ---- ----------------

------------
  --------- -----------
  --------- -
  ----- --------------------
    ----------
    ------- -------------- ------------------------
        ------- ----------- ------- -- ---------- ------------------
            -----------
        ---------
      ---------
    ----
    ----------------- - ------
  -------
  --
--
------ ----- ------------ -
  -------- - ------- ------ -------
-

如何添加必填验证?

------ - --------- - ---- ----------------

------------
  --------- -----------
  ------- --
   ----------------- - ----------- -
      -------- ---- ---------- ---- ---- ----- ------------ -------- --------------------
    ----------
    -----
      ------- -------------- ------------------- ------------
        ------- ----------- ------- -- ---------- ------------------
          -----------
        ---------
      ---------
      --------
    ------
    ----
    ----------------- - ------
  
  --
--
------ ----- ------------ -
  -------- - ---------- ------ -------
-

</-->


上一篇:指令
下一篇:管道