PrimeNG p-password在p-inputgroup中尺寸适配异常求助

PrimeNG的p-inputgroup采用flex布局，p-inputText默认会自动适配容器宽度，但p-password作为封装型组件，默认样式没有继承flex填充规则，导致尺寸不匹配。以下是几种可行的修复方法：

方法1：添加flex填充类（最简单） #

直接给p-password组件添加flex-grow-1类，让它占满p-inputgroup的剩余空间：

<div class="p-inputgroup mb-2 mt-2">
    <span class="p-inputgroup-addon">
      <i class="pi pi-lock"></i>
    </span>
    <p-password class="flex-grow-1" [toggleMask]="true" formControlName="password"></p-password>
</div>
<div class="p-inputgroup mb-2 mt-2">
  <span class="p-inputgroup-addon">
    <i class="pi pi-check"></i>
  </span>
  <p-password class="flex-grow-1" [toggleMask]="true" formControlName="passwordConfirm"></p-password>
</div>

方法2：自定义CSS强制适配 #

如果方法1不生效，可在全局样式文件（如styles.scss）或组件的样式中添加以下规则，强制p-password及其内部输入框占满容器：

.p-inputgroup .p-password {
  flex: 1 1 auto;
  width: 100%;
}

.p-inputgroup .p-password .p-inputtext {
  width: 100%;
}

方法3：使用组件内置的inputGroup属性（PrimeNG 12+支持） #

部分新版本的PrimeNG为p-password提供了inputGroup属性，专门用于配合输入组场景：

<p-password [inputGroup]="true" [toggleMask]="true" formControlName="password"></p-password>

调整后，密码输入框即可和其他文本输入框保持一致的容器适配效果。

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