angular4中关于表单的校验

原创

水痕01 2021-06-15 16:00:58 ©著作权

©著作权归作者所有：来自51CTO博客作者水痕01的原创作品，请联系作者获取转载授权，否则将追究法律责任

本章中介绍响应式表单的创建及表单输入值的校验,对于模板表单就略过。

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

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页面中使用

<form [formGroup]="myForm" (ngSubmit)="postDate()">
    <div class="form-group">
        <label for="username">用户名:</label>
        <input type="text" placeholder="请输入用户名" class="form-control" id="username" formControlName="username" />
    </div>
    <div class="form-group">
        <label for="mobile">手机号码:</label>
        <input type="text" placeholder="请输入手机号码" class="form-control" id="mobile" formControlName="mobile"/>
    </div>
    <div formGroupName="password" style="border:none;">
        <div class="form-group">
            <label>密码:</label>
            <input type="password" class="form-control" placeholder="请输入密码" formControlName="pass1" />
        </div>
        <div class="form-group">
            <label>确认密码:</label>
            <input type="password" class="form-control" placeholder="请再次输入密码" formControlName="pass2" />
        </div>
    </div>
    <div class="form-group">
        <input type="submit" value="提交" class="btn btn-warning" [disabled]="!myForm.valid" />
    </div>
</form>

二、使用表单校验数据

1、angular中自带了三个常见的表单校验的是在Validators中的required,minLength,maxLength
2、自定义表单校验器(其实就一个函数,函数的参数是当前需要校验的行,返回一个任意对象)
```
**格式**
export function fnName(control:FormControl|FormGroup):any{

}
```
3、响应式表单字段中可以写三个值,第一个是返显到页面上的,第二个参数是校验器(可以是一组),第三个参数异步校验(常见判断手机号码,用户名是否重复注册)

三、自定义一个校验方法的步骤

1、把项目中需要用的校验器单独写一个文件

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: '手机号码格式不正确' } };
}

2、使用自己定义的校验器

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: ['']
        })
    });
}

3、定义一个密码组的校验

// 定义一个密码组的验证方法
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: '两次密码不一致' } };
}

4、使用

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: ['']
        }, {validator: passValidator})
    });
}

四、关于前端页面中错误的显示

1、页面显示错误

<div class="form-group">
    <label for="username">用户名:</label>
    <input type="text" placeholder="请输入用户名" class="form-control" id="username" formControlName="username" />
    <!-- 当输入框没有访问的时候或者合法的时候不显示 -->
    <div [hidden]="myForm.get('username').valid || myForm.get('username').untouched">
        <p [hidden]="!myForm.hasError('required','username')">用户名必填的</p>
        <p [hidden]="!myForm.hasError('minlength','username')">用户名长度过短</p>
        <p [hidden]="!myForm.hasError('maxlength','username')">用户名长度太长</p>
    </div>
</div>
<div class="form-group">
    <label for="mobile">手机号码:</label>
    <input type="text" placeholder="请输入手机号码" class="form-control" id="mobile" formControlName="mobile"/>
    <div [hidden]="myForm.get('mobile').valid || myForm.get('mobile').untouched">
        <p [hidden]="!myForm.hasError('mobile', 'mobile')">{{myForm.getError('mobile', 'mobile')?.info}}</p>
    </div>
</div>
<div formGroupName="password" style="border:none;">
    <div class="form-group">
        <label>密码:</label>
        <input type="password" class="form-control" placeholder="请输入密码" formControlName="pass1" />
    </div>
    <div class="form-group">
        <label>确认密码:</label>
        <input type="password" class="form-control" placeholder="请再次输入密码" formControlName="pass2" />
    </div>
    <!-- 对于group可以不在外面加一层判断 -->
    <div>
        <p [hidden]="!myForm.hasError('passValidator','password')">
            {{myForm.getError('passValidator','password')?.info}}
        </p>
    </div>
</div>

2、定义样式文件

.ng-touched:not(form),.ng-invalid:not(form) {
    border: 1px solid #f00;
}

.ng-valid:not(form),.ng-untouched:not(form) {
    border: 1px solid #ddd;
}
p{
    color:#f00;
}