在Angular 6中,要正确验证并且不接受空输入字段,可以使用Angular的表单验证功能。下面是一个示例代码,演示如何实现这个功能:
首先,在组件的HTML模板中,使用Angular的表单控件和验证指令来创建一个表单。例如:
在上面的代码中,我们使用了required
验证指令来确保输入字段不为空。如果字段为空,将显示一个错误消息。
然后,在组件的代码中,可以处理表单的提交事件,并进行验证。例如:
import { Component } from '@angular/core';
@Component({
selector: 'app-my-form',
templateUrl: './my-form.component.html',
styleUrls: ['./my-form.component.css']
})
export class MyFormComponent {
name: string;
onSubmit(form: NgForm) {
if (form.valid) {
// 处理表单提交逻辑
}
}
}
在上面的代码中,我们使用了NgForm
来处理表单的提交事件。form.valid
属性将返回表单是否有效。如果表单有效,可以处理表单的提交逻辑。
这样,当用户尝试提交表单时,如果输入字段为空,将显示错误消息,并阻止表单的提交。只有当输入字段不为空时,才会通过验证并允许提交表单。