要解决Angular 5中ngForm无法验证选择框选项的问题,可以按照以下步骤进行:
import { Component } from '@angular/core';
import { NgForm } from '@angular/forms';
@Component({
selector: 'app-my-form',
templateUrl: './my-form.component.html',
styleUrls: ['./my-form.component.css']
})
export class MyFormComponent {
selectedOption: string;
submitForm(form: NgForm) {
// 手动验证选择框选项
if (!this.selectedOption) {
form.controls['mySelect'].setErrors({ 'required': true });
}
// 表单验证通过时执行其他操作
if (form.valid) {
// 执行提交操作
}
}
}
在上述代码中,我们手动验证选择框的选项。如果选择框的值为空,则将其标记为必填字段并设置错误。这将导致表单验证失败,并阻止表单的提交。
注意:确保在组件文件中导入NgForm和FormControl。此外,还要确保在你的模块文件中导入FormsModule以使用ngForm指令。
这样,当选择框选项为空时,表单提交时将会显示验证错误。