如何在PrimeNG中实现多行文本输入框？

你用<input type="text">是找错控件了——这个标签本身就是单行输入框，哪怕手动设置高度，它的核心行为还是单行，文本居中也是这类控件的默认样式导致的。要实现多行大文本输入，直接用PrimeNG专门的<p-inputTextarea>组件就行，步骤如下：

• 替换原<input>标签为<p-inputTextarea>，它原生支持多行输入、自动换行，还保留你需要的所有表单属性
• 迁移原有属性：required、maxlength、[(ngModel)]都可以直接复用
• 调整样式：如果需要固定宽高，直接在[style]里设置，同时可以加上text-align: left修正文本居中的问题
• 可选：加上autoResize属性可以让文本框根据输入内容自动调整高度（不需要固定500px高度的话）

修正后的固定高度代码示例：

<span>
  <p-inputTextarea 
    required 
    maxlength="500" 
    [(ngModel)]="mymodel"
    [style]="{width: '500px', height: '500px', textAlign: 'left'}"
  ></p-inputTextarea>
</span>

如果不需要固定高度，想要自动适配输入内容，改成这样：

<span>
  <p-inputTextarea 
    required 
    maxlength="500" 
    [(ngModel)]="mymodel"
    [style]="{width: '500px', textAlign: 'left'}"
    autoResize
  ></p-inputTextarea>
</span>

另外，原代码里的text-align="top"在<span>上没有实际作用，可以直接去掉。

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