Angular表单验证器
发布时间:2020-12-17 08:28:23 所属栏目:安全 来源:网络整理
导读:Angular 表单验证器 为何使用验证器? 原因: 用户输入的数据各式各样,并不总是正确的,如果用户输入了错误的数据格式,那么我们希望给他们提供实时正确的反馈,并且阻止表单的提交.因此,我们需要验证器来处理这些情况. Angular 验证器 1.验证器由Validators模块
Angular 表单验证器为何使用验证器?原因: 用户输入的数据各式各样,并不总是正确的,如果用户输入了错误的数据格式,那么我们希望给他们提供实时正确的反馈,并且阻止表单的提交.因此,我们需要验证器来处理这些情况. Angular 验证器1.验证器由Validators模块提供,该模块从'@angular/forms'中导出 import { Validators }from'@angular/forms' 2.使用验证器的方法 // 为FormControl对象指定一个验证器 // 在视图中检查验证器的状态,并根据返回值做出反应 例子1: let control = new FormControl('name',Validators.required); 例子2: this.myForm = this.fb.group({ 'name': ['',Validators.required] }); 3.验证器可以验证的信息 // 检查单个字段的有效性 方式一: myForm.controls['name'].hasError(''); 方式二: myForm.hasError('','name'); // 检查整个表单的有效性 myForm.valid // 整个formGroup是否可用 myForm.dirty // 是否被修改过 myForm.touched // 是否提交过 自定义验证器1.首先查看Angular源代码,例如Validators.required: export class Validators { static required(c: FormControl): StringMap<string,boolean> { return isBlank(c.value) || c.value == '' ? { 'required': true } : null; } } 2.编写自定义验证器 // name必须以'zhou'开头 function nameValidator(control: FormControl): { [s: string]: boolean } { if (!control.value.match(/^zhou/)) { return { invalidName: true }; } } // 使用方法 this.myForm = this.fb.group({ 'name': ['',[Validators.required,this.nameValidator]] }); (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |