要解决Angular Material表单验证和错误没有正确显示的问题,可以按照以下步骤进行:
确保已经正确导入了Angular Material的相关模块和组件。
在模板文件中,使用
包裹表单控件,并将
标签放在
内部,用于显示错误信息。
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
@Component({
selector: 'app-my-component',
templateUrl: './my-component.component.html',
styleUrls: ['./my-component.component.css']
})
export class MyComponent implements OnInit {
myForm: FormGroup;
constructor(private formBuilder: FormBuilder) { }
ngOnInit() {
this.myForm = this.formBuilder.group({
name: ['', [Validators.required, Validators.minLength(3)]]
});
}
// 其他组件逻辑...
}
这样,当用户输入不符合验证规则时,错误信息将正确显示在表单控件下方的
中。