1

2

3

4

5

6

7

8

9

10

<h3 class="text-center">注册</h3>

<form>

 <div class="form-group">

 <label for="username">用户名：</label>

 <input type="text" id="username" class="form-control" >

 </div>

</form>

1

<form [formGroup]="registerForm" >

1

import { FormBuilder, FormGroup, Validators } from '@angular/forms';

1

2

3

formErrors = {

username: ''

};

1

2

3

4

5

6

7

validationMessage = {

'username': {

 'minlength': '用户名长度最少为3个字符',

 'maxlength': '用户名长度最多为10个字符',

 'required': '请填写用户名'

}

};

1

constructor(private fb: FormBuilder) { }

1

2

3

4

5

6

7

8

9

10

11

12

13

buildForm(): void {

// 通过 formBuilder构建表单

this.registerForm = this.fb.group({

/* 为 username 添加3项验证规则：

* 1.必填， 2.最大长度为10， 3.最小长度为3

* 其中第一个空字符串参数为表单的默认值

*/

'username': [ '', [

 Validators.required,

 Validators.maxLength(10),

 Validators.minLength(3)

]]

});

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

onValueChanged(data?: any) {

// 如果表单不存在则返回

if (!this.registerForm) return;

// 获取当前的表单

const form = this.registerForm;

// 遍历错误消息对象

for (const field in this.formErrors) {

 // 清空当前的错误消息

 this.formErrors[field] = '';

 // 获取当前表单的控件

 const control = form.get(field);

 // 当前表单存在此空间控件 && 此控件没有被修改 && 此控件验证不通过

 if (control && control.dirty && !control.valid) {

 // 获取验证不通过的控件名，为了获取更详细的不通过信息

 const messages = this.validationMessage[field];

 // 遍历当前控件的错误对象，获取到验证不通过的属性

 for (const key in control.errors) {

  // 把所有验证不通过项的说明文字拼接成错误消息

  this.formErrors[field] += messages[key] + '\n';

 }

 }

}

}

1

2

3

4

5

6

// 每次表单数据发生变化的时候更新错误信息

this.registerForm.valueChanges

.subscribe(data => this.onValueChanged(data));

// 初始化错误信息

this.onValueChanged();

1

2

<div *ngIf="formErrors.username"

class="showerr alert alert-danger" >{{ formErrors.username }}</div>

1

2

3

4

5

6

7

8

9

form {

width: 90%;

max-width: 45em;

margin: auto;

}

.showerr {

white-space: pre-wrap;

}

1

2

3

4

5

6

7

8

9

10

11

12

13

import { ValidatorFn, AbstractControl } from '@angular/forms';

export function validateRex(type: string, validateRex: RegExp): ValidatorFn {

return (control: AbstractControl): {[key: string]: any} => {

 // 获取当前控件的内容

 const str = control.value;

 // 设置我们自定义的验证类型

 const res = {};

 res[type] = {str}

 // 如果验证通过则返回 null 否则返回一个对象（包含我们自定义的属性）

 return validateRex.test(str) ? null : res;

}

}

1

import { validateRex } from './validate-register';

1

2

3

4

5

6

7

8

9

10

// 为每一项表单验证添加说明文字

validationMessage = {

'username': {

 'minlength': '用户名长度最少为3个字符',

 'maxlength': '用户名长度最多为10个字符',

 'required': '请填写用户名',

 'notdown': '用户名不能以下划线开头',

 'only': '用户名只能包含数字、字母、下划线'

}

};

1

2

3

4

5

6

7

8

9

10

11

12

13

14

// 通过 formBuilder构建表单

this.registerForm = this.fb.group({

/* 为 username 添加 5 项验证规则：

* 1.必填， 2.最大长度为10， 3.最小长度为3， 4.不能以下划线开头， 5.只能包含数字、字母、下划线

* 其中第一个空字符串参数为表单的默认值

*/

'username': [ '', [

 Validators.required,

 Validators.maxLength(10),

 Validators.minLength(3),

 validateRex('notdown', /^(?!_)/),

 validateRex('only', /^[1-9a-zA-Z_]+$/)

]]

});

1

2

3

4

formErrors = {

 username: '',

 password: ''

};

1

2

3

4

5

6

7

8

9

10

11

12

13

14

<h3 class="text-center">注册</h3>

 <form [formGroup]="registerForm" >

 <div class="form-group">

  <label for="username">用户名：</label>

  <input formControlName="username"

  type="text" id="username" #username

  class="form-control" >

  <div *ngIf="formErrors.username" class="showerr alert alert-danger" >{{ formErrors.username }}</div>

 </div>

 </form>

1

2

3

4

5

6

7

8

9

form {

width: 90%;

max-width: 45em;

margin: auto;

}

.showerr {

white-space: pre-wrap;

}

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

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

import { Component, OnInit } from '@angular/core';

import { FormBuilder, FormGroup, Validators } from '@angular/forms';

import { validateRex } from './validate-register';

@Component({

selector: 'app-register',

templateUrl: './register.component.html',

styleUrls: ['./register.component.css']

})

export class RegisterComponent implements OnInit {

// 定义表单

registerForm: FormGroup;

// 表单验证不通过时显示的错误消息

formErrors = {

 username: ''

};

// 为每一项表单验证添加说明文字

validationMessage = {

 'username': {

 'minlength': '用户名长度最少为3个字符',

 'maxlength': '用户名长度最多为10个字符',

 'required': '请填写用户名',

 'notdown': '用户名不能以下划线开头',

 'only': '用户名只能包含数字、字母、下划线'

 }

};

// 添加 fb 属性，用来创建表单

constructor(private fb: FormBuilder) { }

ngOnInit() {

 // 初始化时构建表单

 this.buildForm();

}

// 构建表单方法

buildForm(): void {

 // 通过 formBuilder构建表单

 this.registerForm = this.fb.group({

 /* 为 username 添加3项验证规则：

 * 1.必填， 2.最大长度为10， 3.最小长度为3， 4.不能以下划线开头， 5.只能包含数字、字母、下划线

 * 其中第一个空字符串参数为表单的默认值

 */

 'username': [ '', [

  Validators.required,

  Validators.maxLength(10),

  Validators.minLength(3),

  validateRex('notdown', /^(?!_)/),

  validateRex('only', /^[1-9a-zA-Z_]+$/)

 ]]

 });

 // 每次表单数据发生变化的时候更新错误信息

 this.registerForm.valueChanges

 .subscribe(data => this.onValueChanged(data));

 // 初始化错误信息

 this.onValueChanged();

}

// 每次数据发生改变时触发此方法

onValueChanged(data?: any) {

 // 如果表单不存在则返回

 if (!this.registerForm) return;

 // 获取当前的表单

 const form = this.registerForm;

 // 遍历错误消息对象

 for (const field in this.formErrors) {

 // 清空当前的错误消息

 this.formErrors[field] = '';

 // 获取当前表单的控件

 const control = form.get(field);

 // 当前表单存在此空间控件 && 此控件没有被修改 && 此控件验证不通过

 if (control && control.dirty && !control.valid) {

  // 获取验证不通过的控件名，为了获取更详细的不通过信息

  const messages = this.validationMessage[field];

  // 遍历当前控件的错误对象，获取到验证不通过的属性

  for (const key in control.errors) {

  // 把所有验证不通过项的说明文字拼接成错误消息

  this.formErrors[field] += messages[key] + '\n';

  }

 }

 }

}

}

1

2

3

4

5

6

7

8

9

10

11

12

13

import { ValidatorFn, AbstractControl } from '@angular/forms';

export function validateRex(type: string, validateRex: RegExp): ValidatorFn {

return (control: AbstractControl): {[key: string]: any} => {

 // 获取当前控件的内容

 const str = control.value;

 // 设置我们自定义的严重类型

 const res = {};

 res[type] = {str}

 // 如果验证通过则返回 null 否则返回一个对象（包含我们自定义的属性）

 return validateRex.test(str) ? null : res;

}

}