PrimeNG表单含两个pInputText时p-button显示异常，单个输入框正常

这个问题的核心是Angular表单的状态管理与PrimeNG组件渲染的冲突：

当页面存在<form>标签时，Angular会自动创建NgForm实例来跟踪表单控件的状态。但你用[(ngModel)]绑定的输入框没有指定name属性，导致NgForm无法正确识别这些控件，进而干扰了PrimeNG按钮的初始样式渲染——点击按钮后触发了组件状态更新，样式才恢复正常。

场景验证 #

移除一个输入框后，表单内控件数量减少，NgForm的状态异常影响被弱化，所以按钮能正常显示，但这只是临时规避，并非根本解决办法。

解决方案 #

方案1：为输入框添加name属性（推荐）

给每个带[(ngModel)]的pInputText指定唯一name，让NgForm能正确管理控件状态：

<form style="text-align: left;">
    <input pInputText type="text" [(ngModel)]="newUserFirstname" name="firstname" />
    <br/><br/>
    <input pInputText type="text" [(ngModel)]="newUserLastname" name="lastname" />
    <br/><br/>
    <p-button label="Submit"></p-button>
</form>

方案2：禁用Angular表单自动管理

如果不需要Angular的表单状态管理功能，可在<form>标签上添加ngNoForm指令，阻止NgForm自动创建：

<form style="text-align: left;" ngNoForm>
    <input pInputText type="text" [(ngModel)]="newUserFirstname" />
    <br/><br/>
    <input pInputText type="text" [(ngModel)]="newUserLastname" />
    <br/><br/>
    <p-button label="Submit"></p-button>
</form>

效果对比 #

• 异常状态截图：
• 正常状态截图：

内容的提问来源于stack exchange，提问作者Jean François Manatane