Angular Reactive Forms下拉框验证在mouseup前触发是否为预期行为？

这个现象不是Angular框架或PrimeNG组件的预期设计行为，是对应版本p-dropdown组件的touched状态触发逻辑和原生表单控件不一致导致的。

问题原因 #

原生HTML下拉控件默认会在失焦（blur）时才将表单控件标记为touched状态，而你使用的版本中p-dropdown组件会在mousedown事件触发时就直接标记控件为touched：你点击下拉框按下鼠标、还未触发mouseup完成选择操作时，表单控件已经被标记为触碰过，结合你写的验证触发逻辑（只要touched或dirty且无效就展示错误），就会出现验证提示提前展示的问题。

修复方案 #

你可以选择以下任意一种方式解决：

• 调整FormControl的更新时机，在定义表单控件时指定updateOn为blur，让控件仅在失焦时才更新状态：

equipmentForm = this.fb.group({
  // 其他控件省略
  selectedRegion: ['', { validators: Validators.required, updateOn: 'blur' }]
})

• 修改验证提示的触发条件，新增表单提交状态判断，仅在表单提交后才展示未通过的验证提示：
  先在组件中定义提交状态变量：

submitted = false;

onSubmit() {
  this.submitted = true;
  // 后续提交逻辑
}

再调整模板中的判断条件：

<div class="col-md-8">
  <p-dropdown id="regionId" [required]="true" formControlName="selectedRegion"
    placeholder="Select region (required)" [options]="regions" optionLabel="name"
    [ngClass]="{'ng-invalid ng-dirty is-invalid' : (submitted || equipmentForm.get('selectedRegion').touched || equipmentForm.get('selectedRegion').dirty) && !equipmentForm.get('selectedRegion').valid }">
  </p-dropdown>
  <span class="invalid-feedback">
    <span *ngIf="submitted && equipmentForm.get('selectedRegion').errors?.required">
      Please select a region.
    </span>
  </span>
</div>

• 升级PrimeNG到最新稳定版，高版本的PrimeNG已经修复了p-dropdown的touched状态触发时机问题，和原生控件逻辑保持一致。

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