Template-Driven Forms 模板驱动式表单

Angular 4.x 中有两种表单：

• Template-Driven Forms - 模板驱动式表单 (类似于 AngularJS 1.x 中的表单 )

• Reactive Forms - 响应式表单

本文主要介绍 Template-Driven Forms (模板驱动式表单) ，将涉及ngForm、ngModel、ngModelGroup、表单提交事件、表单验证和异常信息输出等内容。

export

使用template-driven 表单前，我们必须在@NgModule中导入@angular/forms库中的FormModule：

import { FormsModule } @NgModule({
imports: [
...,FormsModule
],declarations: [...],bootstrap: [...]
})
export <span style="color: #0000ff">class AppModule {}

import { Component } @Component({
selector: <span style="color: #800000">'<span style="color: #800000">signup-form<span style="color: #800000">'<span style="color: #000000">,template: </span><form novalidate>...</form><span style="color: #000000"&gt;
})
export <span style="color: #0000ff">class<span style="color: #000000"> SignupFormComponent {
<span style="color: #0000ff">public user: User =<span style="color: #000000"> {
name: <span style="color: #800000">''<span style="color: #000000">,account: {
email: <span style="color: #800000">''<span style="color: #000000">,confirm: <span style="color: #800000">''<span style="color: #000000">
}
};
constructor() {}
}

初始化 SignupFormComponent 组件类中的用户模型后，我们开始实现第一个功能点：即绑定 name、email、confirm 输入框的值

我们从 ngForm 开始，更新后的模板如下：

> Full name placeholder=>

上面代码中，我们把ngForm的值赋值给#f变量，通过该变量我们可以方便的获取表单的值。

在模板中，我们可以通过以下方式查看表单的值：

{{ f.value | json }}

上面示例f.value输出 {}，因为此时我们表单中还未绑定任何值。在 Angular 1.x 中我们可以使用ng-model指令进行表单数据的双向绑定，接下来我们来看一下 Angular 4.x 中怎么实现数据绑定。

在 Angular 4.x 中ngModel有三种不同的语法：

• ngModel - 直接使用 ngModel 指令，没有使用绑定或关联任何值。此时，ngModel 将自动关联表单控件的 name 属性，并使用该值作为 ngForm 对象的属性名。

><===>

运行以上代码，f.value 的输入值如下：

{{ f.value | json }}

非常好，我们已经绑定了 name 输入框的值。但我们应该怎么为输入框设置初始值？

[ngModel] = one-way binding syntax (单向绑定语法)

为了设置输入框初始值，我们先要更新一下 SignupFormComponent 组件类的用户模型：

=

更新完用户模型，我们需要同步更新组件模板，具体如下：

><====>

代码重新运行后，f.value 的输出如下：

{{ f.value | json }}

从上面示例可以看出，使用[ngModel]允许我们通过this.user.name设置 name 输入框的初始值，而且该值会自动绑定到f.value对象上。

如果想在 name 输入框值变化时，自动同步更新this.user.name的值，我们需要使用双向绑定。

• [(ngModel)] = two-way binding syntax (双向绑定)，具体示例如下：

><====>

上面示例成功运行后，我们可以在模板中新增以下代码，然后观察user模型的值：

{{ user | json }}

需要注意的是，以下两种方式是等价的：

> (ngModelChange)=>

其中[(ngModel)]是简写的语法糖。

我们已经介绍了ngForm和ngModel的基础用法，现在我们来完善剩下的内容。SignupFormComponent 组件类的用户模型中，包含了一个嵌套属性account，account 对象中包含email和confirm属性，分为表示邮件地址和重复确认的邮件地址。针对这种场景，Angular 4.x 为我们提供了ngModelGroup指令，具体示例如下：

> Full name <===>

> Email address <===> Confirm address <===>

>Sign up

使用ngModelGroup指令后，我们的 DOM 结构将更加合理：

ngForm -> -> -> -> ngModel -> -> ngModel ->

以上代码成功运行后，浏览器中页面显示的结果：

{{ f.value | json }}

此时我们已经完成了表单数据绑定，接下来我们来为表单增加提交逻辑。

Angular 表单中提供了ngSubmit输出属性，用于监听表单的提交事件：

#f=>

当用户提交表单时，我们将会把f作为参数，调用ngSubmit关联的onSubmit()方法。onSubmit() 方法的具体实现如下：

export =

上面代码中，我们使用Object destructuring(对象解构) 的方式，从#f引用对象中获取value和valid属性的值。其中value的值，就是f.value的值。表单的数据绑定方式和提交逻辑已经介绍完了，是该介绍表单实际应用中，一个重要的环节 — 表单验证。

在为表单项添加验证规则前，我们先来更新一下 SignupFormComponent 组件中的Sign up按钮，确保在表单验证不通过时，不允许用户执行表单提交操作。更新后的代码如下：

#f=> [disabled]=>Sign up

以上代码我们通过f.invalid获取表单当前的验证状态 (验证不通过时该值为true)，来控制按钮的disabled属性。

接下来开始进入正题，为表单添加验证规则：

> <>

> <=> <=>

>Sign up

#f引用对象中有一个controls属性，通过该属性，我们就可以获取表单控件的验证信息，下面示例演示了如何获取 name 表单控件验证的异常信息：

>?.errors |

f.controls.name?.errors的值是null或undefined时，表示验证成功。

接下来为我们的 name 表单控件，添加显示异常信息的代码：

=>

虽然我们已经可以获取某个表单项的验证信息，但有没有觉得使用f.controls.name?.errors这种方式，太麻烦了。那么有没有更简单的方式呢？我的答案是 - Yes ！废话不多说，马上看示例：

<=>

=>

#userName="ngModel")

以上代码成功运行后，我们在浏览器中看到了异常信息，为了避免一开始就显示异常信息，我们可以更新一下*ngIf表达式的验证逻辑：

=>

除了使用required验证规则之外，我们还可以使用minlength(最小长度)、maxlength(最大长度) 等验证规则，下面我们继续来完善 SignupFormComponent 组件的功能，即为其它的表单控件添加显示异常信息的功能：

=>

=>

<div ngIf=<span style="color: #800000">"<span style="color: #800000">userEmail.errors?.required && userEmail.touched<span style="color: #800000">"
<span style="color: #0000ff">class=<span style="color: #800000">"<span style="color: #800000">error<span style="color: #800000">"><span style="color: #000000">
Email <span style="color: #0000ff">is<span style="color: #000000"> required

<div ngIf=<span style="color: #800000">"<span style="color: #800000">userConfirm.errors?.required && userConfirm.touched<span style="color: #800000">"
<span style="color: #0000ff">class=<span style="color: #800000">"<span style="color: #800000">error<span style="color: #800000">"><span style="color: #000000">
Confirming email <span style="color: #0000ff">is<span style="color: #000000"> required

我们通过使用模板变量的方式，为 account 表单组添加了显示验证异常信息的功能。但有没有其它更好的方式呢？有没有办法去掉userEmail和userConfirm引用对象呢？答案是肯定的，具体示例如下：

#userAccount=> Email address <===> Confirm address <===>

=>

(备注：记得移除模板上的#userEmail和#userConfirm引用哈)

touched外，还包含其它几种状态？

表单控件有以下 6 种状态，我们可以通过#userName="ngModel"方式获取对应的状态值。具体状态如下：

• valid - 表单控件有效

• invalid - 表单控件无效

• pristine - 表单控件值未改变

• dirty - 表单控件值已改变

• touched - 表单控件已被访问过

• untouched - 表单控件未被访问过

#userName和#userName="ngModel"这两种方式有什么区别？

• #userName- 指向 input 表单控件

• #userName="ngModel"- 指向 NgModel 实例

ngModelGroup 指令是 Angular 提供的另一特殊指令，可以对表单输入内容进行分组，方便我们在语义上区分不同性质的输入。例如联系人的信息包括姓名及住址，现在需对姓名和住址进行精细化信息收集，姓名可精细化成姓和名字，地址可精细化成城市、区、街等。此时就可以将姓名及住址进行分组收集，具体如下:

>

#nameGroup=> 姓: name= [(ngModel)]=> 名字: name= [(ngModel)]=>

#addressGroup => 街: name= [(ngModel)]= required> 区: name= [(ngModel)]= required> 城市: name= [(ngModel)]= required>

上述例子分别对联系人的姓名和住址进行分组， ngModelGroup 将姓和名字的表单内容进行包裹组成姓名分组，将城市、区和街道的表单内容进行包裹组成住址分组。此时concatForm.value值为:

转自：https://segmentfault.com/a/1190000009037539

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!