PrimeNG 13.4.1版本p-dropdown默认dirty状态问题求助

针对你遇到的Dropdown未交互就处于dirty状态的问题，结合必须保留13.4.1版本的限制，可以尝试以下几种方案：

方案1：初始化时手动将FormControl标记为Pristine #

在组件初始化完成后，直接调用对应FormControl的markAsPristine()方法，覆盖组件默认的dirty状态：

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormBuilder } from '@angular/forms';

@Component({
  // 组件元数据
})
export class YourComponent implements OnInit {
  yourForm: FormGroup;

  constructor(private fb: FormBuilder) {}

  ngOnInit(): void {
    this.yourForm = this.fb.group({
      allergyid: [''] // 初始值设为空
    });

    // 初始化后立即标记为pristine
    this.yourForm.get('allergyid')?.markAsPristine();
    // 按需清除touched状态
    this.yourForm.get('allergyid')?.markAsUntouched();
  }
}

方案2：通过Dropdown交互事件控制dirty状态 #

监听Dropdown的onChange和onClear事件，仅在用户真正操作后标记FormControl为dirty：

模板修改 #

在<p-dropdown>上添加事件绑定：

<p-dropdown
    [autoDisplayFirst]="false"
    resetFilterOnHide="true"
    id="allergyid"
    formControlName="allergyid"
    tooltip="Allergy Name"
    styleClass="form-control"
    [options]="pamAlgseverity"
    optionLabel="description"
    optionValue="id"
    placeholder="Allergy"
    [virtualScroll]="true"
    [itemSize]="31"
    [filter]="true"
    [showClear]="true"
    (onChange)="onDropdownChange()"
    (onClear)="onDropdownClear()">
</p-dropdown>

组件逻辑实现 #

onDropdownChange(): void {
  this.yourForm.get('allergyid')?.markAsDirty();
  this.yourForm.get('allergyid')?.markAsTouched();
}

onDropdownClear(): void {
  // 清除操作视为用户交互，保持dirty状态
  this.yourForm.get('allergyid')?.markAsDirty();
}

同时需在初始化时将FormControl标记为pristine，确保初始状态干净。

方案3：拦截FormControl的valueChanges避免误触发 #

如果是组件内部初始化时意外触发valueChanges导致dirty，可临时取消初始订阅，初始化完成后再重新订阅业务逻辑：

ngOnInit(): void {
  this.yourForm = this.fb.group({
    allergyid: ['']
  });

  const control = this.yourForm.get('allergyid');
  // 获取并取消组件初始化时的默认订阅
  const initialSubscription = control?.valueChanges.subscribe();
  initialSubscription?.unsubscribe();
  
  // 标记为初始干净状态
  control?.markAsPristine();

  // 重新订阅你的业务逻辑
  control?.valueChanges.subscribe(value => {
    // 自定义业务处理
  });
}

以上方案均适配PrimeNG 13.4.1版本，无需升级或降级框架即可实现需求。

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