为什么我不能阻止用户编辑PrimeNG表单字段值？

问题描述

我正在使用 PrimeNG 进行Angular项目，但在尝试禁用将文本表单编辑为字段时遇到以下困难。

基本上，在我组件的HTML代码中，我有这样的东西：

<input id="disabled-input"
       type="text"
       pInputText
       [disabled]="disabled"
       formControlName="UID" />

如您所见，它正在使用 formControlName 属性从TypeScript代码中定义的 FormGroup *对象中检索数据（工作正常）。如您所见，我还对此进行了设置，以避免编辑此字段值的可能性：

[disabled]="disabled"

然后进入该组件的TypeScript代码中，我声明了该变量：

disabled = true;

所以我希望输入字段编辑被禁用，但实际上并非如此，

奇怪的是，以这种方式在另一个组件中正在运行。唯一的区别是，在此其他组件中，文件字段未绑定到表单，而是使用 [（ngModel）] 通过以下方式绑定了字段值：

    <input id="disabled-input"
           type="text"
           pInputText
           [disabled]="disabled"
           [(ngModel)]="orderDetail.UID" />

在第二种情况下，它可以正常工作，并且用户无法编辑字段值。

为什么在第一种情况下我不能阻止用户编辑字段值？我可以得到这种行为吗？

解决方法

第一种情况不起作用，因为它是模板驱动形式和反应形式的混合。来自Angular docs：

模板驱动的表单依赖于模板中的指令来创建和 操作基础对象模型。它们对于添加 应用程序的简单表单，例如电子邮件列表注册表单。很简单 添加到应用程序中，但它们不如可伸缩表单那样可扩展。如果 您有非常基本的表单要求和可以管理的逻辑 仅在模板中，模板驱动的表单可能很合适。

IMO避免使用生产软件的模板表格。它们没有足够的可伸缩性和可测试性。

对于Reactive表单，需要禁用表单控件。

this.formGroup.get('UID').disable();