Angular 6表单验证是Angular框架提供的一种验证机制,用于验证用户输入的数据。下面是一个示例,展示如何在Angular 6中使用表单验证。
首先,在你的Angular项目中创建一个新的组件,比如叫做FormValidationComponent
。
import { Component, OnInit } from '@angular/core';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
@Component({
selector: 'app-form-validation',
templateUrl: './form-validation.component.html',
styleUrls: ['./form-validation.component.css']
})
export class FormValidationComponent implements OnInit {
form: FormGroup;
constructor(private formBuilder: FormBuilder) { }
ngOnInit() {
// 创建表单
this.form = this.formBuilder.group({
name: ['', Validators.required],
email: ['', [Validators.required, Validators.email]],
password: ['', [Validators.required, Validators.minLength(6)]],
confirmPassword: ['', Validators.required],
});
// 添加自定义验证器
this.form.get('confirmPassword').setValidators(this.matchPassword.bind(this));
}
// 自定义验证器,用于验证密码和确认密码是否匹配
matchPassword(control: FormControl) {
const password = this.form.get('password').value;
const confirmPassword = control.value;
if (password && confirmPassword && password !== confirmPassword) {
return { passwordMismatch: true };
}
return null;
}
// 提交表单的回调函数
onSubmit() {
if (this.form.valid) {
console.log('表单验证通过');
} else {
console.log('表单验证失败');
}
}
}
在上面的代码中,我们使用FormGroup
和FormBuilder
来创建表单,并使用Validators
来添加一些内置的验证规则,比如required
、email
和minLength
。我们还使用setValidators
方法添加了一个自定义的验证器,用于验证密码和确认密码是否匹配。
然后,在form-validation.component.html
模板文件中,创建一个表单,并添加对应的表单控件和验证器。
在上面的代码中,我们使用formGroup
指令将表单和组