html选择文件提交表单前增加校验,Angular响应式表单校验及提交主动触发所有校验...

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

1、在模块(一般是app.module.ts)中引入ReactiveFormsModule

2、在组件的ts文件中使用响应式表单import { Component, OnInit } from '@angular/core';

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

@Component({

selector: 'app-form-validate',

templateUrl: './form-validate.page.html',

styleUrls: ['./form-validate.page.scss'],

})

export class FormValidatePage implements OnInit {

public 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);

}

else

{

//如果验证失败：主动循环触发验证错误信息显示在界面上

for (const i in this.myForm.controls) {

this.myForm.controls[i].markAsTouched();

this.myForm.controls[i].updateValueAndValidity();

}

}

}

}

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

用户名:

class="form-control" id="username" formControlName="username" />

用户名必填的

用户名长度过短

用户名长度太长

手机号码:

{{myForm.getError('mobile', 'mobile')?.info}}

密码:

确认密码:

{{myForm.getError('passValidator','password')?.info}}

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

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

}

//定义一个密码组的校验

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: '两次密码不一致' } };

}

2、使用自己定义的校验器=>mobileValidatorcreateForm() {

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})

});

}

三、动态调整验证规则

为了演示 “动态调整验证规则” 的功能，我新增了两个控件：radio – 用于让用户设置是否开启手机登录。

tel – 当用户开启手机登录功能，用于让用户输入手机号码。当用户开启手机登录功能，手机号码对应控件的验证规则，必须是必填且格式为合法的手机号码。当用户不开启手机登录功能时，手机号码对应控件将不是必填的。

新增 radio 控件

开启手机登录      

formControlName="enableMobile">

是      

formControlName="enableMobile">

否      

新增 tel 控件

[ngClass]="{'has-error': (mobile.touched || mobile.dirty) && !mobile.valid }">

for="mobileId">手机号码

id="mobileId"

type="text"

placeholder="请输入手机号码"

formControlName="mobile"/>

&& mobile.errors">

请输入手机号码

手机号码格式不正确

动态调整验证规则功能ngOnInit(): void {

...    this.signupForm.get('enableMobile').valueChanges

.subscribe(value => this.checkMobile(value));

}

checkMobile(enableMobile: string): void {  const mobileControl = this.signupForm.get('mobile');

enableMobile === "1" ?

mobileControl.setValidators([Validators.required,

Validators.pattern('1(3|4|5|7|8)\\d{9}')]) :

mobileControl.clearValidators();

mobileControl.updateValueAndValidity();

}

原文链接 http://www.nbsite.cn/qdjs/168