首页
编程开发 > JAVA > 文章内容

JavaScript知识点：详解Angular4表单快速入门

2017-6-13编辑:daibenhua

　　基础知识

　　Angular CLI 基本使用

　　安装 Angular CLI (可选)

　　?

1
npm install -g @angular/cli

　　创建新的项目

　　?

1
ng new PROJECT-NAME

　　启动本地服务器

　　?

1
2
cd PROJECT-NAME
ng serve

　　Angular Forms 简介

　　Angular 4 中有两种表单：

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

　　Reactive Forms - 响应式表单

　　本文主要介绍 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: `
  "text" [(ngModel)]="username">
  {{username}}
 `,
})
export class AppComponent {
 username = 'semlinker';
}

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

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

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

　　required - 设置表单控件值是非空的

　　email - 设置表单控件值的格式是 email

　　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: `
  
   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: `
  
   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: `
  
   type="text"
   required
   minlength="3"
   [(ngModel)]="username"
   #userName="ngModel">
  
  
"userName.errors?.required">请您输入用户名
  
"userName.errors?.minlength">
   用户名的长度必须大于 {{userName.errors?.minlength.requiredLength}}，当前的长度为
    {{userName.errors?.minlength.actualLength}}
  
 `,
})
export class AppComponent {
 username = 'semlinker';
}

　　第四节 - 创建表单

　　如何使用表单?

　　在 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
import { Component } from '@angular/core';
 
@Component({
 selector: 'app-root',
 template: `
 
  
   type="text"
   required
   minlength="3"
   name="username"
   [(ngModel)]="username"
   #userName="ngModel">
  
  
"userName.errors?.required">请您输入用户名
  
"userName.errors?.minlength">
   用户名的长度必须大于 {{userName.errors?.minlength.requiredLength}}，当前的长度为
    {{userName.errors?.minlength.actualLength}}
  
  
 
 `,
})
export class AppComponent {
 username = 'semlinker';
}

　　需要注意的是，在使用

标签后，我们的 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
31
import { Component } from '@angular/core';
 
@Component({
 selector: 'app-root',
 template: `
  #loginForm="ngForm" (ngSubmit)="onSubmit(loginForm.value)">
  
   type="text"
   required
   minlength="3"
   name="username"
   [(ngModel)]="username"
   #userName="ngModel">
  
  
"userName.errors?.required">请您输入用户名
  
"userName.errors?.minlength">
   用户名的长度必须大于 {{userName.errors?.minlength.requiredLength}}，当前的长度为
    {{userName.errors?.minlength.actualLength}}
  
  
  {{loginForm.value | json}}
 
 `,
})
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
35
import { Component } from '@angular/core';
 
@Component({
 selector: 'app-root',
 template: `
  #loginForm="ngForm" (ngSubmit)="onSubmit(loginForm.value)">
  
"user">
  
   type="text"
   required
   minlength="3"
   name="username"
   [(ngModel)]="username"
   #userName="ngModel">
  
  
"userName.errors?.required">请您输入用户名
  
"userName.errors?.minlength">
   用户名的长度必须大于 {{userName.errors?.minlength.requiredLength}}，当前的长度为
    {{userName.errors?.minlength.actualLength}}
  
  "password" ngModel name="password">
  
  
  
  {{loginForm.value | json}}
 
 `,
})
export class AppComponent {
 username = 'semlinker';
 
 onSubmit(value) {
  console.dir(value);
 }
}

　　以上代码成功运行后，{{loginForm.value | json}} 的输出结果：

　　?

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
43
44
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: `
  #loginForm="ngForm" (ngSubmit)="onSubmit(loginForm.value)">
  
"user">
  
   type="text"
   required
   minlength="3"
   name="username"
   [(ngModel)]="username"
   #userName="ngModel">
  
  
"userName.errors?.required">请您输入用户名
  
"userName.errors?.minlength">
   用户名的长度必须大于 {{userName.errors?.minlength.requiredLength}}，当前的长度为
    {{userName.errors?.minlength.actualLength}}
  
  "password" required ngModel name="password">
  
  
  
  {{loginForm.value | json}}
 
 `,
})
export class AppComponent {
 username = 'semlinker';
 
 onSubmit(value) {
  console.dir(value);
 }
}

　　第七节 - 表单控件的状态

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

　　在 Angular 中表单控件有以下 6 种状态，我们可以通过 #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
49
50
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: `
  #loginForm="ngForm" (ngSubmit)="onSubmit(loginForm.value)">
  
"user">
  
   type="text"
   required
   minlength="3"
   name="username"
   [(ngModel)]="username"
   #userName="ngModel">
  
  

Name控件的valid状态：{{userName.valid}} - 表示控件有效

  

Name控件的invalid状态：{{userName.invalid}} - 表示控件无效

  

Name控件的pristine状态：{{userName.pristine}} - 表示控件值未改变

  

Name控件的dirty状态：{{userName.dirty}} - 表示控件值已改变

  

Name控件的touched状态：{{userName.touched}} - 表示控件已被访问过

  

Name控件的untouched状态：{{userName.untouched}} - 表示控件未被访问过

  
"userName.errors?.required">请您输入用户名
  
"userName.errors?.minlength">
   用户名的长度必须大于 {{userName.errors?.minlength.requiredLength}}，当前的长度为
    {{userName.errors?.minlength.actualLength}}
  
  "password" required ngModel name="password">
  
  
  
  {{loginForm.value | json}}
 
 `,
})
export class AppComponent {
 username = 'semlinker';
 
 onSubmit(value) {
  console.dir(value);
 }
}

　　第八节 - 使用单选控件

　　如何添加单选控件?

　　在 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
import { Component } from '@angular/core';
 
@Component({
 selector: 'app-root',
 template: `
  #loginForm="ngForm">
  Angular版本：
  
"let version of versions;">
    
     [attr.id]="version"
      name="version"
      ngModel
      required
      [value]="version"
      type="radio">
     
   
  
  {{loginForm.value | json}}
 
 `,
})
export class AppComponent {
 versions = ['1.x', '2.x', '3.x'];
}

　　第九节 - 使用多选控件

　　如何添加多选控件?

　　在 Angular 中，我们通过

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: `
  #loginForm="ngForm">
  Angular版本：
  
  
  {{loginForm.value | json}}
 
 `,
})
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
30
31
import { Component } from '@angular/core';
 
@Component({
 selector: 'app-root',
 styles: [`
  select.ng-invalid + label:after {
   content: '<-- 请选择版本!'
  }
 `
 ],
 template: `
  #loginForm="ngForm">
  Angular版本：
  
   
   
  
  
  {{loginForm.value | json}}
 
 `,
})
export class AppComponent {
 versions = ['','1.x', '2.x', '3.x'];
}

 

 

java基础知识总结（193）

热点推荐

登录注册
触屏版电脑版网站地图