Angular 6.x下拉选择框表单验证错误信息不显示问题求助

看起来你遇到的问题主要是两个小细节没处理到位，我帮你梳理下并给出具体的修复方案：

问题根源分析 #

从你贴的代码来看，错误信息不显示主要有两个可能原因：

1. 模板里用的f.invoice_type没有在组件中正确定义，导致模板无法获取到表单控件的错误状态
2. 下拉框默认选项的ngValue和表单控件的初始值不匹配，干扰了验证状态的判断

具体修复步骤 #

1. 给表单控件添加Getter引用

你的模板里用了f.invoice_type来访问表单控件，但组件里并没有定义f这个属性，所以模板里的f其实是undefined，自然无法触发错误信息的显示。在组件类里添加一个Getter就能解决这个问题：

import { FormBuilder, FormGroup, Validators } from '@angular/forms'; 
export class ProjectsAddComponent implements OnInit { 
  projectForm: FormGroup;
  submitted = false; // 记得声明submitted变量

  constructor(private formBuilder: FormBuilder) {} 

  ngOnInit() {
    // 把表单初始化逻辑放在ngOnInit里，符合Angular最佳实践
    this.projectForm = this.formBuilder.group({ 
      'invoice_type': ['', Validators.required] 
    }); 
  }

  // 添加这个Getter，让模板里的f能正确指向表单控件集合
  get f() { return this.projectForm.controls; }

  // 表单提交方法示例
  onSubmit() {
    this.submitted = true;

    // 如果表单无效，直接返回，不继续提交
    if (this.projectForm.invalid) {
      return;
    }

    // 这里写你的表单提交逻辑
  }
}

2. 对齐下拉框默认选项值与表单初始值

你的表单控件初始值是空字符串''，但默认选项的ngValue设为了undefined，这会导致控件的状态判断出现偏差。把默认选项的ngValue改成空字符串，和表单初始值保持一致：

<!-- 确保form标签上有[formGroup]="projectForm"，比如：
<form [formGroup]="projectForm" (ngSubmit)="onSubmit()">
-->
<select tabindex="4" class="selectoptn required" formControlName="invoice_type" required [ngClass]="{ 'is-invalid': submitted && f.invoice_type.errors }"> 
  <!-- 将ngValue改为空字符串，匹配表单初始值 -->
  <option value="" [selected]="true" [ngValue]="''">Select an Invoice Type</option> 
  <option value="pdf">PDF</option> 
  <option value="brc">BRC</option> 
</select> 
<div *ngIf="submitted && f.invoice_type.errors" class="invalid-feedback"> 
  <div *ngIf="f.invoice_type.errors.required">Invoice type is required</div> 
</div>

验证修复效果 #

做完上面的修改后，再提交表单：

• 当你没选择任何发票类型时，下拉框会被加上is-invalid类
• 对应的错误提示文案也会正常显示出来

另外要注意，表单初始化的逻辑最好放在ngOnInit钩子中，而不是直接写在构造函数里，这是Angular的最佳实践哦。

内容的提问来源于stack exchange，提问作者Abilash Arjunan