| Angular

Angular表单自定义校验

表单内置校验

先简单的看一下表单内置校验

  • required：判断表单控件值是否为空
  • minlength：判断表单控件值的最小长度
  • maxlength：判断表单控件值的最大长度
  • pattern：判断表单控件值的匹配规则
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
// html
<form #simpleForm="ngForm">
  <ul>
    <li>
      <label>姓名：</label>
      <input type="text" name="name" [(ngModel)]="person.name" minlength="3" maxlength="10" required #name="ngModel">
      <p style="display: inline;" *ngIf="name.invalid">姓名错误</p>
    </li>
    
    <li>
      <label>电话：</label>
      <input type="text" name="tel" [(ngModel)]="person.tel" #tel="ngModel" pattern="1[0-9]{10}">
      <p style="display: inline;" *ngIf="tel.invalid">电话错误</p>
    </li>

    <li>
      <label>邮箱：</label>
      <input type="text" name="email" [(ngModel)]="person.email" #email="ngModel" pattern="[a-z0-9]+@[a-z0-9]+.com">
      <p style="display: inline;" *ngIf="email.invalid">邮箱错误</p>
    </li>
  </ul>
</form>

// ts
person = {
    name: "",
    tel: "",
    email: "",
  }

表单自定义校验

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
// html
<form [formGroup]="customizeForm">
  <ul>
    <li>
      <label>姓名：</label>
      <input type="text" name="name1" formControlName="name1">
      <p style="display: inline;" *ngIf="customizeForm.controls.name1.invalid">姓名错误</p>
    </li>

    <li>
      <label>电话：</label>
      <input type="text" name="tel1" formControlName="tel1">
      <p style="display: inline;" *ngIf="customizeForm.controls.tel1.invalid">{{this.customizeForm.controls.tel1.errors.errorMsg}}</p>
    </li>

    <li>
      <label>邮箱：</label>
      <input type="text" name="email1" formControlName="email1">
      <p style="display: inline;" *ngIf="customizeForm.controls.email1.invalid">{{this.customizeForm.controls.email1.errors.errorMsg}}</p>
    </li>
  </ul>
</form>

// ts
customizeForm = new FormGroup({
    name1: new FormControl("", [Validators.minLength(4), Validators.maxLength(10), Validators.required]),
    tel1: new FormControl("", validateTel),
    email1: new FormControl("", validateEmail),
  }) 
  
// validattion.ts
const TEL_REGEXP = new RegExp("1[0-9]{10}");
const EMAIL_REGEXP = new RegExp("[a-z0-9]+@[a-z0-9]+.com");
export function validateTel(c: FormControl){
  return TEL_REGEXP.test(c.value) ? null : { errorMsg: '电话错误', }
}


export function validateEmail(c: FormControl){
  return EMAIL_REGEXP.test(c.value) ? null : { errorMsg: '邮箱错误', }
}

表单自定义校验简单封装

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
// .html
<form [formGroup]="improveForm">
  <ul>
    <li>
      <label>姓名：</label>
      <input type="text" name="name2" formControlName="name2">
      <p style="display: inline;" *ngIf="improveForm.controls.name2.invalid">姓名错误</p>
    </li>

    <li>
      <label>电话：</label>
      <input type="text" name="tel2" formControlName="tel2">
      <p style="display: inline;" *ngIf="improveForm.controls.tel2.invalid">{{this.improveForm.controls.tel2.errors.errorMsg}}</p>
    </li>

    <li>
      <label>邮箱：</label>
      <input type="text" name="email2" formControlName="email2">
      <p style="display: inline;" *ngIf="improveForm.controls.email2.invalid">{{this.improveForm.controls.email2.errors.errorMsg}}</p>
    </li>
  </ul>
</form>

// .ts
 improveForm = new FormGroup({
    name2: new FormControl("", [Validators.minLength(4), Validators.maxLength(10), Validators.required]),
    tel2: new FormControl("", validation("tel") ),
    email2: new FormControl("", validation("email")),
  }) 
  
// validation.ts
export const validation = (key) => (c: FormControl) => {
  if(key == "tel"){
    return TEL_REGEXP.test(c.value) ? null : { errorMsg: '电话错误', }
  }
  if(key == "email"){
    return EMAIL_REGEXP.test(c.value) ? null : { errorMsg: '邮箱错误', }
  }
}
ESC