Angular 5提供了一种强大的表单验证机制,可以使用模板驱动的方式或者响应式表单的方式来实现。下面是一个示例,演示了如何在Angular 5中进行表单验证。
在上述示例中,我们使用了ngModel
指令来绑定表单控件的值,并且使用了required
和email
验证器来进行表单验证。通过myForm.controls.name.invalid
和myForm.controls.email.invalid
可以判断表单控件的验证状态,然后使用*ngIf
指令来显示相应的错误消息。
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
@Component({
selector: 'app-my-form',
template: `
`,
})
export class MyFormComponent implements OnInit {
myForm: FormGroup;
constructor(private formBuilder: FormBuilder) {}
ngOnInit() {
this.myForm = this.formBuilder.group({
name: ['', Validators.required],
email: ['', [Validators.required, Validators.email]],
});
}
onSubmit(form: FormGroup) {
if (form.invalid) {
return;
}
// 处理表单提交逻辑
}
}
在上述示例中,我们使用了FormBuilder
来构建表单模型,并且使用Validators
来添加相应的验证器。通过myForm.controls.name.invalid
和myForm.controls.email.invalid
可以判断表单控件的验证状态,然后使用*ngIf
指令来显示相应的错误消息。
需要注意的是,响应式表单需要在模块中导入ReactiveFormsModule
模块才能正常使用。