你可以使用Angular材料的FormControl
和FormGroup
来轻松解决这个问题。下面是一个例子:
在component.ts文件中:
import { Component, OnInit } from '@angular/core';
import { FormControl, FormGroup, Validators } from '@angular/forms';
@Component({
selector: 'app-example',
templateUrl: './example.component.html',
styleUrls: ['./example.component.css']
})
export class ExampleComponent implements OnInit {
form: FormGroup;
ngOnInit() {
this.form = new FormGroup({
name: new FormControl('', Validators.required),
email: new FormControl('', [Validators.required, Validators.email])
});
}
get name() {
return this.form.get('name');
}
get email() {
return this.form.get('email');
}
}
在component.html文件中:
在上面的例子中,我们创建了一个FormGroup
并使用FormControl
来定义两个表单控件:name
和email
。我们还使用Validators
来添加一些验证规则(例如:required
和email
)。
在HTML模板中,我们使用formGroup
指令将form
绑定到元素上,并使用
formControlName
指令将表单控件与对应的FormControl
关联起来。
为了只在表单控件被触摸时显示错误消息,我们使用*ngIf
指令来检查表单控件的状态。只有当控件的状态为invalid
并且它已经被编辑过(dirty
)或者被触摸过(touched
)时,才会显示错误消息。
这样,当用户在表单控件上输入内容或者点击了其他地方时,错误消息就会显示或隐藏。