qrcode

马上订阅,开启修仙之旅

Angular 6.x 表单快速入门

目录

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

阅读须知

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

基础知识

Angular CLI 基本使用

1
$ npm install -g @angular/cli
  • 创建新的项目
1
$ ng new project-name
  • 启动本地服务器
1
2
$ cd project-name
$ ng serve

Angular 表单简介

Angular 中有两种表单:

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

Template Driven 表单的特点

  • 使用方便
  • 适用于简单的场景
  • 通过 [(ngModel)] 实现数据双向绑定
  • 自动生成 Form Model (异步)
  • 最小化组件类的代码
  • 不易于单元测试

Reactive 表单的特点

  • 比较灵活
  • 适用于复杂的场景
  • 简化了HTML模板的代码,把验证逻辑抽离到组件类中
  • 手动创建 Form Model (同步)
  • 方便的跟踪表单控件值的变化
  • 易于动态添加表单控件
  • 易于单元测试

本文主要介绍 Template Driven Forms (模板驱动式表单)的基础知识,相关的知识点会以问答的形式进行介绍。

第一节 - 创建最简单的输入框

如何实现双向绑定?

在 Angular 表单中,我们通过 ngModel 指令来实现双向绑定。

1
2
3
4
5
6
7
8
9
10
11
12
import { Component } from '@angular/core';

@Component({
selector: 'app-root',
template: `
<input type="text" [(ngModel)]="username">
{{username}}
`,
})
export class AppComponent {
username = 'semlinker';
}

第二节 - 添加简单的验证功能

如何为表单控件添加验证功能?

目前 Angular 支持的内建 validators 如下:

  • required - 设置表单控件值是非空的
  • email - 设置表单控件值的格式是 email
  • min - 设置表单控件值的最小值
  • max - 设置表单控件值的最大值
  • minlength - 设置表单控件值的最小长度
  • maxlength - 设置表单控件值的最大长度
  • pattern - 设置表单控件的值需匹配 pattern 对应的模式

接下来我们来添加最简单的 “必填” 校验。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
import { Component } from '@angular/core';

@Component({
selector: 'app-root',
template: `
<input
type="text"
required
[(ngModel)]="username">
{{username}}
`,
})
export class AppComponent {
username = 'semlinker';
}

如何判断表单控件是否通过验证?

在 Angular 中,我们可以通过 #userName="ngModel" 方式获取 ngModel 对象,然后通过 userName.valid 判断表单控件是否通过验证。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
import { Component } from '@angular/core';

@Component({
selector: 'app-root',
template: `
<input
type="text"
required
[(ngModel)]="username"
#userName="ngModel">
{{userName.valid}}
`,
})
export class AppComponent {
username = 'semlinker';
}

第三节 - 显示验证失败的错误信息

如何显示验证失败的错误信息?

在 Angular 中,我们可以通过 #userName="ngModel" 方式获取 ngModel 对象,然后通过该对象的 errors 属性,来获取对应验证规则 (如 required, minlength 等) 的验证状态。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
import { Component } from '@angular/core';

@Component({
selector: 'app-root',
template: `
<input
type="text"
required
minlength="3"
[(ngModel)]="username"
#userName="ngModel">
<hr>
<div *ngIf="userName.errors?.required">请您输入用户名</div>
<div *ngIf="userName.errors?.minlength">
用户名的长度必须大于 {{userName.errors?.minlength.requiredLength}},当前的长度为
{{userName.errors?.minlength.actualLength}}
</div>
`,
})
export class AppComponent {
username = 'semlinker';
}

第四节 - 创建表单

如何使用表单?

在 Angular 中,我们可以使用熟悉的 <form> 标签来创建表单。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
import { Component } from '@angular/core';

@Component({
selector: 'app-root',
template: `
<form>
<input
type="text"
required
minlength="3"
name="username"
[(ngModel)]="username"
#userName="ngModel">
<hr>
<div *ngIf="userName.errors?.required">请您输入用户名</div>
<div *ngIf="userName.errors?.minlength">
用户名的长度必须大于 {{userName.errors?.minlength.requiredLength}},当前的长度为
{{userName.errors?.minlength.actualLength}}
</div>
<button type="submit">提交</button>
</form>
`,
})
export class AppComponent {
username = 'semlinker';
}

需要注意的是,在使用 <form> 标签后,我们的 username 输入框,必须添加 name 属性。

如何获取表单提交的值?

在 Angular 中,我们可以通过 #loginForm="ngForm" 方式获取 ngForm 对象,然后通过 loginForm.value 来获取表单的值。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
import { Component } from '@angular/core';

@Component({
selector: 'app-root',
template: `
<form #loginForm="ngForm" (ngSubmit)="onSubmit(loginForm.value)">
<input
type="text"
required
minlength="3"
name="username"
[(ngModel)]="username"
#userName="ngModel">
<hr>
<div *ngIf="userName.errors?.required">请您输入用户名</div>
<div *ngIf="userName.errors?.minlength">
用户名的长度必须大于 {{userName.errors?.minlength.requiredLength}},当前的长度为
{{userName.errors?.minlength.actualLength}}
</div>
<button type="submit">提交</button>
</form>
`,
})
export class AppComponent {
username = 'semlinker';

onSubmit(value) {
console.dir(value);
}
}

第五节 - ngModelGroup简介

ngModelGroup 有什么作用?

ngModelGroup 指令是 Angular 表单中提供的另一特殊指令,可以对表单输入内容进行分组,方便我们在语义上区分不同性质的输入。

比如联系人的信息包括姓名及住址,现在需对姓名和住址进行精细化信息收集,姓名可精细化成姓和名字,地址可精细化成城市、区、街等。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
import { Component } from '@angular/core';

@Component({
selector: 'app-root',
template: `
<form #loginForm="ngForm" (ngSubmit)="onSubmit(loginForm.value)">
<fieldset ngModelGroup="user">
<input
type="text"
required
minlength="3"
name="username"
[(ngModel)]="username"
#userName="ngModel">
<hr>
<div *ngIf="userName.errors?.required">请您输入用户名</div>
<div *ngIf="userName.errors?.minlength">
用户名的长度必须大于 {{userName.errors?.minlength.requiredLength}},当前的长度为
{{userName.errors?.minlength.actualLength}}
</div>
<input type="password" ngModel name="password">
</fieldset>
<button type="submit">提交</button>
<hr>
</form>
`,
})
export class AppComponent {
username = 'semlinker';

onSubmit(value) {
console.dir(value);
}
}

运行以上代码,点击提交按钮后的输出结果:

1
{ "user": { "username": "semlinker", "password": "123" } }

第六节 - 表单添加验证状态样式

如何为表单添加验证状态样式信息?

在 Angular 表单中,若验证通过则会在表单控件上添加 ng-valid 类,若验证失败则会在表单控件上添加 ng-invalid 类。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
import { Component } from '@angular/core';

@Component({
selector: 'app-root',
styles: [`
input.ng-invalid {
border: 3px solid red;
}
input.ng-valid {
border: 3px solid green;
}
`
],
template: `
<form #loginForm="ngForm" (ngSubmit)="onSubmit(loginForm.value)">
<fieldset ngModelGroup="user">
<input
type="text"
required
minlength="3"
name="username"
[(ngModel)]="username"
#userName="ngModel">
<hr>
<div *ngIf="userName.errors?.required">请您输入用户名</div>
<div *ngIf="userName.errors?.minlength">
用户名的长度必须大于 {{userName.errors?.minlength.requiredLength}},当前的长度为
{{userName.errors?.minlength.actualLength}}
</div>
<input type="password" required ngModel name="password">
</fieldset>
<button type="submit">提交</button>
</form>
`,
})
export class AppComponent {
username = 'semlinker';

onSubmit(value) {
console.dir(value);
}
}

第七节 - 表单控件的状态

表单控件除了 valid 状态外,还包含哪些状态?

在 Angular 中表单控件有以下状态,我们可以通过 #userName="ngModel" 方式获取 ngModel 对象,进而获取控件的状态信息。

表单控制的状态:

  • valid - 表单控件有效
  • invalid - 表单控件无效
  • pristine - 表单控件值未改变
  • dirty - 表单控件值已改变
  • touched - 表单控件已被访问过
  • untouched - 表单控件未被访问过
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
import { Component } from '@angular/core';

@Component({
selector: 'app-root',
styles: [`
input.ng-invalid {
border: 3px solid red;
}
input.ng-valid {
border: 3px solid green;
}
`
],
template: `
<form #loginForm="ngForm" (ngSubmit)="onSubmit(loginForm.value)">
<fieldset ngModelGroup="user">
<input
type="text"
required
minlength="3"
name="username"
[(ngModel)]="username"
#userName="ngModel">
<hr>
<p>Name控件的valid状态:{{userName.valid}} - 表示控件有效</p>
<p>Name控件的invalid状态:{{userName.invalid}} - 表示控件无效</p>
<p>Name控件的pristine状态:{{userName.pristine}} - 表示控件值未改变</p>
<p>Name控件的dirty状态:{{userName.dirty}} - 表示控件值已改变</p>
<p>Name控件的touched状态:{{userName.touched}} - 表示控件已被访问过</p>
<p>Name控件的untouched状态:{{userName.untouched}} - 表示控件未被访问过</p>
<div *ngIf="userName.errors?.required">请您输入用户名</div>
<div *ngIf="userName.errors?.minlength">
用户名的长度必须大于 {{userName.errors?.minlength.requiredLength}},当前的长度为
{{userName.errors?.minlength.actualLength}}
</div>
<input type="password" required ngModel name="password">
</fieldset>
<button type="submit">提交</button>
</form>
`,
})
export class AppComponent {
username = 'semlinker';

onSubmit(value) {
console.dir(value);
}
}

第八节 - 使用单选控件

如何添加单选控件?

在 Angular 中,我们通过 <input name="***" type="radio"> 方式添加单选控件。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
import { Component } from '@angular/core';

@Component({
selector: 'app-root',
template: `
<form #loginForm="ngForm">
Angular版本:
<div *ngFor="let version of versions;">
<input
[attr.id]="version"
name="version"
ngModel
required
[value]="version"
type="radio">
<label [attr.for]="version">{{version}}</label>
</div>
</form>
`,
})
export class AppComponent {
versions = ['1.x', '2.x', '3.x'];
}

第九节 - 使用多选控件

如何添加多选控件?

在 Angular 中,我们通过 <select name="***"> 方式添加多选控件。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
import { Component } from '@angular/core';

@Component({
selector: 'app-root',
template: `
<form #loginForm="ngForm">
Angular版本:
<select name="version" [ngModel]="versions[0]">
<option
*ngFor="let version of versions;"
[value]="version">
{{version}}
</option>
</select>
</form>
`,
})
export class AppComponent {
versions = ['1.x', '2.x', '3.x'];
}

如何添加必填验证?

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
import { Component } from '@angular/core';

@Component({
selector: 'app-root',
styles: [`
select.ng-invalid + label:after {
content: '<-- 请选择版本!'
}
`
],
template: `
<form #loginForm="ngForm">
Angular版本:
<div>
<select name="version" [ngModel]="version" required>
<option
*ngFor="let version of versions;"
[value]="version">
{{version}}
</option>
</select>
<label></label>
</div>
</form>
`,
})
export class AppComponent {
versions = ['','1.x', '2.x', '4.x', '6.x'];
}

欢迎小伙伴们订阅前端修仙之路,及时阅读 Angular、RxJS、TypeScript 和 Node.js 最新文章。

qrcode