要将Angular Material表单字段控制为空,可以使用Angular的FormControl对象和Validators.required验证器。
首先,确保已导入所需的模块和依赖项:
import { Component, OnInit } from '@angular/core';
import { FormControl, Validators } from '@angular/forms';
然后,在组件类中创建一个FormControl对象,并使用Validators.required验证器将其设置为必填字段:
export class YourComponent implements OnInit {
myFormField: FormControl;
ngOnInit() {
this.myFormField = new FormControl('', Validators.required);
}
}
在模板中,将FormControl对象与Angular Material表单字段绑定,并使用mat-error指令显示验证错误消息:
This field is required.
现在,当用户尝试提交表单时,如果该字段为空,Angular Material将显示错误消息。如果字段已填写或触摸过,则显示错误消息。