在Angular 7中,可以通过使用模板驱动表单和动态验证器来实现动态验证。下面是一个示例解决方法:
myForm
的表单,并添加一个email
字段和一个required
验证规则:
email
属性,并在其中添加验证规则:import { Component } from '@angular/core';
@Component({
selector: 'app-my-component',
templateUrl: './my-component.component.html',
styleUrls: ['./my-component.component.css']
})
export class MyComponent {
email: string;
}
validateEmail
的自定义验证器函数,用于验证邮箱的格式:import { Component } from '@angular/core';
import { FormControl, Validators } from '@angular/forms';
@Component({
selector: 'app-my-component',
templateUrl: './my-component.component.html',
styleUrls: ['./my-component.component.css']
})
export class MyComponent {
email: string;
validateEmail(control: FormControl) {
const emailPattern = /^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$/;
return emailPattern.test(control.value) ? null : { invalidEmail: true };
}
}
validateEmail
函数添加到email
字段的验证规则中:
Email is required
Invalid email format
email
字段的验证规则中:import { Component } from '@angular/core';
import { FormControl, Validators } from '@angular/forms';
@Component({
selector: 'app-my-component',
templateUrl: './my-component.component.html',
styleUrls: ['./my-component.component.css']
})
export class MyComponent {
email: string;
validateEmail(control: FormControl) {
const emailPattern = /^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$/;
return emailPattern.test(control.value) ? null : { invalidEmail: true };
}
}
这样,当输入字段失去焦点时,将动态验证邮箱的格式。通过在模板文件中添加相应的错误消息,可以在验证失败时显示错误消息。