work hard work smart

专注于Java后端开发。 不断总结,举一反三。
随笔 - 1158, 文章 - 0, 评论 - 153, 阅读 - 186万
  博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理
< 2025年2月 >
26 27 28 29 30 31 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 1
2 3 4 5 6 7 8

Angular 4 表单校验1

Posted on   work hard work smart  阅读(333)  评论(0编辑  收藏  举报

1.html

1
2
3
4
5
6
7
8
9
10
11
12
13
<form [formGroup]="formModel" (submit)="submit()">
   <div>
     用户名:<input  type="text" formControlName="username">
     电话:<input  type="text" formControlName="mobile">
 
     <div formGroupName="passwordsGroup">
       密码:<input  type="password" formControlName="password">
       确认密码:<input  type="password" formControlName="pconfirm">
     </div>
 
   </div>
  <div><button type="submit">保存</button></div>
</form>

  

2. 控制器中创建FormModel

1
2
3
4
5
6
7
8
9
10
constructor(private http: Http, fb: FormBuilder) {
  this.formModel = fb.group({
    username:  ['', [Validators.required, Validators.minLength(10)]],
    mobile:  ['', this.mobileValidator],
    passwordsGroup: fb.group({
        password:  [''],
        pconfirm: ['']
    }, { validator: this.equalValidator} ),
  });
}

  

3. 创建自定义校验器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
mobileValidator(control: FormControl): any {
  const myreg = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/;
  const valid = myreg.test(control.value);
  console.log('mobile result: ' + valid);
  return valid ? null : {mobile: true};
 
}
 
equalValidator(group: FormGroup): any {
  const password: FormControl = group.get('password') as FormControl;
  const pconfirm: FormControl = group.get('pconfirm') as FormControl;
  const valid: boolean = password.value === pconfirm.value;
  console.log('password equal: ' + valid);
  return valid ? null : {equal: true};
}

  mobileValidator用来校验电话号码是否有效

  equalValidator 用来校验两次输入的密码是否一致

 

4. submit方法

1
2
3
4
5
6
7
8
9
10
submit() {
  const isValid: boolean = this.formModel.get('username').valid;
  console.log('username: ' + isValid);
  const errors: any = this.formModel.get('username').errors;
  console.log('username errors' + JSON.stringify(errors));
  if ( this.formModel.valid) {
    console.log(this.formModel.value);
  }
 
}

  

5.完整的代码 

 

点击右上角即可分享
微信分享提示