首先,请确保所有表单控件都已包装在form标记中,并且每个表单控件都设置了FormControl或NgModel指令。 然后,您需要在模板中为每个表单控件设置一个独特的名称,并在组件中创建一个FormGroup,将每个FormControl或NgModel添加到FormGroup中。 最后,您需要在模板中使用FormControl的valid或touched状态来判断表单控件是否有效或视为触摸过。如果表单控件无效或视为未触摸,则显示mat-error。 以下是一个简单的示例:
HTML模板:
组件:
import { Component, OnInit } from '@angular/core';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
@Component({
selector: 'app-my-form',
templateUrl: './my-form.component.html',
styleUrls: ['./my-form.component.css']
})
export class MyFormComponent implements OnInit {
myForm: FormGroup;
constructor(private fb: FormBuilder) { }
ngOnInit() {
this.myForm = this.fb.group({
firstName: ['', Validators.required],
lastName: ['', Validators.required]
});
}
submit() {
// submit logic here
}
}