NgPrime p-dropdown带模板、过滤、清除图标功能被form包裹后折叠问题

问题原因 #

该折叠异常由三个常见触发点导致：

• Angular模板驱动表单规则要求，放在<form>标签内、使用ngModel绑定的表单控件必须声明name属性，缺少该属性会导致Angular表单注册逻辑和PrimeNG组件的渲染逻辑冲突，触发高度计算错误
• 你写的自定义选中项模板仅在selectedCountry有值时渲染内容，清空选中值后选中区域无对应内容渲染，直接触发高度塌陷
• 部分全局表单样式可能会覆盖p-dropdown的默认容器样式，也会导致渲染异常

修复方案 #

按以下步骤调整代码即可解决：

1. 给<p-dropdown>添加name属性，和你绑定的字段名保持一致
2. 给selectedItem模板补充空值状态的兜底渲染逻辑
3. 必要时可以手动指定组件最小宽高，避免塌陷

修改后的参考代码如下：

<h5>带自定义模板、过滤功能和清除图标的高级下拉框</h5>
<p-dropdown 
    name="selectedCountry"
    [options]="countries" 
    [(ngModel)]="selectedCountry" 
    optionLabel="name" 
    [filter]="true" 
    filterBy="name"
    [showClear]="true" 
    placeholder="选择国家"
    style="min-width: 220px"
>
    <ng-template pTemplate="selectedItem">
        <div class="country-item country-item-value" *ngIf="selectedCountry; else emptySelected">
            <div>{{selectedCountry.name}}</div>
        </div>
        <ng-template #emptySelected>
            <span class="p-placeholder">选择国家</span>
        </ng-template>
    </ng-template>
    <ng-template let-country pTemplate="item">
        <div class="country-item">
            <div>{{country.name}}</div>
        </div>
    </ng-template>
</p-dropdown>

如果调整后仍存在异常，可以检查项目全局样式中是否对<form>下的div、input等标签设置了不合理的overflow: hidden、固定高度等属性，针对性覆盖即可。

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