Angular表单提交时如何显示多个下拉框必填错误提示？

看起来你的问题主要出在两个地方：表单提交事件里的验证逻辑不完整，以及模板中错误提示的条件判断存在变量混淆。咱们一步步来解决：

1. 修正表单提交事件的验证逻辑 #

你当前的(ngSubmit)里只判断了userrole的有效性，完全没处理scopename的情况，所以第二个下拉框没选的时候不会触发错误提示。建议把复杂的验证逻辑抽离到组件方法里，同时检查两个控件的状态：

首先修改模板中的表单提交事件：

<form *ngIf="formResetToggle" class="form-horizontal" name="permissionEditorForm" #f="ngForm" novalidate 
  (ngSubmit)="handleFormSubmit(f)">

然后在组件类中添加handleFormSubmit方法：

handleFormSubmit(form: NgForm) {
  if (form.valid) {
    this.savePermission(form.controls['userrole'].value, form.controls['scopename'].value);
  } else {
    // 检查第一个下拉框
    if (!form.controls['userrole'].valid) {
      this.showErrorAlert('User role is required', 'Please select user role');
    }
    // 检查第二个下拉框
    if (!form.controls['scopename'].valid) {
      this.showErrorAlert('Scope Name is required', 'Please select scope name');
    }
  }
}

2. 修复模板中的错误提示条件 #

你模板里的错误提示用了!userrole.valid、userrole.dirty，但这里的userrole是你用[(ngModel)]绑定的组件变量，不是表单控件的引用。正确的做法是通过表单对象f来访问控件的状态，同时优化触发条件（比如提交后或控件被触碰时显示错误）：

修改第一个下拉框的错误提示：

<span *ngIf="(f.submitted && !f.controls['userrole'].valid) || (f.controls['userrole'].touched && !f.controls['userrole'].valid)" class="errorMessage">
  User Role Required!
</span>

第二个下拉框同理：

<span *ngIf="(f.submitted && !f.controls['scopename'].valid) || (f.controls['scopename'].touched && !f.controls['scopename'].valid)" class="errorMessage">
  Scope Name Required!
</span>

另外，你当前的[(ngModel)]绑定变量和select的name属性同名（比如name='userrole'和[(ngModel)]='userrole'），容易混淆，建议把组件内的绑定变量改名，比如selectedUserRoleValue，避免冲突：

<select #selectedUserRole autofocus name='userrole' class="form-control" [(ngModel)]='selectedUserRoleValue' required>

3. 额外优化建议 #

• 可以给组件添加getter简化模板代码：

  get userRoleControl() {
    return this.f.controls['userrole'];
  }
  
  get scopeNameControl() {
    return this.f.controls['scopename'];
  }
  

  之后模板里就可以用userRoleControl.invalid这类简洁写法。
• 用ngClass动态添加错误样式，让控件状态更直观：

  <div class="col-md-10" [ngClass]="{'has-error': (f.submitted || userRoleControl.touched) && userRoleControl.invalid}">
  

这样修改后，两个下拉框在未选择时提交表单，都会正确触发错误提示啦。

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