angular4中关于表单校验的示例分析

这篇文章给大家分享的是有关angular4中关于表单校验的示例分析的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。

创新互联建站是一家专业提供西乡塘企业网站建设,专注与成都网站设计、做网站、成都外贸网站建设公司、H5开发、小程序制作等业务。10年已为西乡塘众多企业、政府机构等服务。创新互联专业网站制作公司优惠进行中。

一、使用响应式表单的步骤

1、在模块(一般是app.module.ts)中引入ReactiveFormsModule
2、在组件的ts文件中使用响应式表单

import { FormGroup, FormBuilder, Validators, FormControl } from '@angular/forms';
export class ReactiveFormComponent implements OnInit {
  private myForm: FormGroup;
  constructor(private fb: FormBuilder) {
    this.createForm();
  }

  ngOnInit() {
  }
  // 创建表单元素
  createForm() {
    this.myForm = this.fb.group({
      username: ['', [Validators.required, Validators.minLength(3), Validators.maxLength(6)]],
      mobile: ['', [Validators.required]],
      password: this.fb.group({
        pass1: [''],
        pass2: ['']
      })
    });
  }
  // 提交表单函数
  postDate() {
    /**
     * valid:是否有效
     * invalid:无效
     * dirty:脏
     * status:状态
     * errors:显示错误
     */
    if(this.myForm.valid){
      console.log(this.myForm.value);
    }
  }
}

3、在组件的html页面中使用


  
    用户名:

手机号码:

密码:

import { FormControl, FormGroup } from '@angular/forms'; /** * 自定义验证器(其实就是一个函数,一个返回任意对象的函数) * 传递的参数是当前需要验证的表单的FormControl * 通过传递的参数获取当前表单输入的值 */ export function mobileValidator(control: FormControl): any { console.dir(control); // 获取到输入框的值 const val = control.value; // 手机号码正则 const mobieReg = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/; const result = mobieReg.test(val); return result ? null : { mobile: { info: '手机号码格式不正确' } }; }

createForm() { this.myForm = this.fb.group({ username: ['', [Validators.required, Validators.minLength(3), Validators.maxLength(6)]], mobile: ['', [Validators.required, mobileValidator]], password: this.fb.group({ pass1: [''], pass2: [''] }) }); }

// 定义一个密码组的验证方法 export function passValidator(controlGroup: FormGroup): any { // 获取密码输入框的值 const pass1 = controlGroup.get('pass1').value as FormControl; const pass2 = controlGroup.get('pass2').value as FormControl; console.log('你输入的值:', pass1, pass2); const isEqule: boolean = (pass1 === pass2); return isEqule ? null : { passValidator: { info: '两次密码不一致' } }; }

用户名: 用户名必填的

用户名长度过短

用户名长度太长

手机号码: {{myForm.getError('mobile', 'mobile')?.info}}

密码:

确认密码:

重庆分公司，新征程启航

angular4中关于表单校验的示例分析

其他资讯