PrimeNG 14 Chips组件与p-inputgroup兼容问题求助

针对 Angular 14 + PrimeNG 14.2.x 场景下，Chips 组件嵌入 InputGroup 后无法显示添加内容的问题，提供以下排查和解决方向：

• 必须绑定数据源
  p-chips 是依赖数组的多值组件，不能像普通 input 那样无绑定使用。先在组件类中定义数组变量：

  recipientEmails: string[] = [];
  

  再在模板中通过双向绑定或表单控件关联数据源：

  <!-- 模板驱动表单用 ngModel -->
  <p-chips [(ngModel)]="recipientEmails" allowDuplicate="false" separator="," name="recipientEmails"></p-chips>
  
  <!-- 响应式表单用 formControlName -->
  <p-chips formControlName="recipientEmails" allowDuplicate="false" separator="," name="recipientEmails"></p-chips>
  

  没有绑定数据源的话，添加的内容无法被存储，自然无法显示。

• 修复 InputGroup 与 Chips 的布局冲突
  PrimeNG 的 p-inputgroup 采用 flex 布局，而 p-chips 内部结构嵌套较深，仅设置 .p-chips { width: 100%; } 不足以让内部输入框占满空间。试试以下样式：

  .p-inputgroup .p-chips {
    flex: 1 1 auto;
    width: 0; /* 触发 flex 自动填充剩余空间 */
  }
  .p-chips .p-chips-input-token {
    width: 100%;
  }
  

  该样式会让 Chips 组件自动填充 InputGroup 的剩余宽度，同时让内部输入框占满 Chips 容器。

• 排查组件导入与基础功能
  先将 p-chips 从 p-inputgroup 中单独测试：

  <p-chips [(ngModel)]="recipientEmails" allowDuplicate="false" separator=","></p-chips>
  

  如果单独使用仍无法显示内容，检查是否在模块中正确导入了 ChipsModule：

  import { ChipsModule } from 'primeng/chips';
  
  @NgModule({
    imports: [
      // ...其他模块
      ChipsModule
    ]
  })
  export class YourModule { }
  

• 调整 InputGroup 的嵌套结构
  部分 PrimeNG 版本中，Chips 与 InputGroup Addon 的组合需要额外结构适配，试试给 Chips 外层包裹原生输入容器类：

  <div class="p-col-12 p-md-4">
    <div class="p-inputgroup">
      <span class="p-inputgroup-addon"><em class="pi pi-envelope"></em></span>
      <div class="p-inputwrapper">
        <p-chips [(ngModel)]="recipientEmails" allowDuplicate="false" separator="," name="recipientEmails"></p-chips>
      </div>
    </div>
  </div>
  

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