在Angular中,可以使用FormBuilder和FormControl来创建表单并进行验证。当表单验证失败时,可以通过错误消息来提示用户。
以下是一个示例代码,展示了如何在表单验证中测试并显示错误:
import { Component } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
export class MyFormComponent {
myForm: FormGroup;
constructor(private formBuilder: FormBuilder) {
this.myForm = this.formBuilder.group({
email: ['', [Validators.required, Validators.email]],
password: ['', Validators.required]
});
}
}
在上述代码中,通过formControlName
属性将表单控件与表单组关联起来,并使用Angular的模板语法*ngIf
来显示错误消息。dirty
和touched
属性用于检查用户是否已经与表单交互过。
这样,当用户提交表单时,如果表单验证失败,错误消息将显示在相应的字段下方。
希望以上代码对您有所帮助!