Angular响应式表单predecesseur字段视图不显示问题求助

问题描述 #

使用Angular响应式表单展示表单信息时，除predecesseur字段外，其余字段均能正常渲染值，该字段必须刷新页面才会显示对应值。控制台日志显示patchValue已成功设置该字段的值，但页面无对应显示，尝试添加ngAfterViewInit()未解决问题。

控制台日志 #

• before updatePhaseFormulaire(): Phase {}
• after updatePhaseFormulaire(): {id: 1, nom: 'Admissibilité',statutOk: 'Accepté', statutKo: 'Refusé', …}

相关代码 #

.ts 文件代码 #

private getPhaseParId(id: number) {
    this.phasesService.getPhaseParId(id)
      .subscribe(
        (phase: Phase) => {
          if (phase) {
            this.maPhase = phase;
            console.log("before updatePhaseFormulaire()",this.phaseFormulaire.get('predecesseur').value);
            this.updatePhaseFormulaire();                
            console.log("after updatePhaseFormulaire()",this.phaseFormulaire.get('predecesseur').value);
            
          } else {
            // else bloc treatment
          }
        },
        erreur => {
          // error bloc treatment
        })
}

private updatePhaseFormulaire(): void {   
    this.phaseFormulaire.patchValue({
      id: this.maPhase.id,
      nom: this.maPhase.nom,
      predecesseur: this.maPhase?.predecesseur      
    })    
}

.html 代码片段 #

<form [formGroup]="phaseFormulaire" class="needs-validation" novalidate>
  <div class="form-row">
    <select class="form-input heightFixed" id="predecesseur"
        formControlName="predecesseur"
        title="{{ 'phase.formulaire.predecesseur.input.infobulle' | translate}}">
        <option [ngValue]="null||undefined" *ngIf="phaseListe && phaseListe.length > 0">
          {{ 'phase.formulaire.predecesseur.placeholder.libelle' | translate}}
        </option>
        <option [ngValue]="null||undefined" *ngIf="!phaseListe || phaseListe.length === 0">
          {{ 'phase.formulaire.predecesseur.aucunPredecesseur.libelle' | translate}}
        </option>
        <option [ngValue]="predecesseur" *ngFor="let predecesseur of predecesseursListe | orderBy:'nom'" [attr.selected]="predecesseur.id == this.maPhase?.predecesseur?.id ? true : null">
          {{predecesseur.nom}}
        </option>
      </select>
  </div>
</form>

问题分析 #

1. Angular响应式表单下拉框默认通过对象引用匹配选中项，API返回的maPhase.predecesseur与本地predecesseursListe中的对象不是同一个引用，导致表单无法识别匹配项。
2. 手动添加的[attr.selected]属性与响应式表单的自动选中逻辑冲突，响应式表单会忽略手动设置的选中状态。

修复方案 #

方案1：确保对象引用一致 #

修改updatePhaseFormulaire方法，从本地列表中匹配对应ID的对象，保证引用一致后再设置到表单：

private updatePhaseFormulaire(): void {   
    // 从本地列表中找到匹配对象，确保引用一致
    const matchedPredecesseur = this.predecesseursListe?.find(p => p.id === this.maPhase.predecesseur?.id);
    this.phaseFormulaire.patchValue({
      id: this.maPhase.id,
      nom: this.maPhase.nom,
      predecesseur: matchedPredecesseur || this.maPhase?.predecesseur      
    })    
}

方案2：自定义比较器（保留完整对象绑定） #

如果需要绑定完整对象而非仅ID，通过compareWith函数定义对象相等判断规则：

1. 在组件类中添加比较函数：

comparePredecesseur(p1: Phase | null, p2: Phase | null): boolean {
  // 基于ID判断对象是否相等
  return p1 && p2 ? p1.id === p2.id : p1 === p2;
}

2. 在模板的select标签上添加[compareWith]属性：

<select class="form-input heightFixed" id="predecesseur"
    formControlName="predecesseur"
    [compareWith]="comparePredecesseur"
    title="{{ 'phase.formulaire.predecesseur.input.infobulle' | translate}}">

必做操作：移除手动选中属性 #

删除模板中option标签上的[attr.selected]属性，避免干扰响应式表单的自动选中逻辑：

<!-- 删除此行代码 -->
[attr.selected]="predecesseur.id == this.maPhase?.predecesseur?.id ? true : null"

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