在Angular中,可以使用模板驱动表单或响应式表单来进行表单验证。无论哪种方式,对于空字段的验证都是必要的。
对于模板驱动表单,可以使用ngModel指令来捕获表单控件的值并进行验证。可以使用required属性来指示必填字段。以下是一个示例:
在上面的示例中,ngModel
指令捕获了文本框的值,并使用required
属性指示该字段必须填写。按钮元素上的[disabled]
属性只有在表单无效时才会使其失效。
对于响应式表单,可以使用FormControl来捕获值并进行验证。可以使用Validators.required
函数来指示必填字段。以下是一个示例:
import { Component } from '@angular/core';
import { FormControl, Validators } from '@angular/forms';
@Component({
selector: 'my-app',
template: `
`,
})
export class AppComponent {
myForm = new FormGroup({
name: new FormControl('', Validators.required)
});
onSubmit() {
console.log(this.myForm.value);
}
}
在上面的示例中,FormControl
捕获了文本框的值,并使用Validators.required
函数指示该字段必须填写。按钮元素上的[disabled]
属性只有在表单无效时才会使其失效。