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

Question

我正在使用 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" />

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

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

Answer 1

虽然它可能不符合您的需求，但

[禁用]=“禁用”

我用过

只读=“只读”

达到这个目的。该字段并未禁用，但无法更改，这就是我的目标。

      <input readonly="readonly" pInputText class="p-inputtext-sm" formControlName="featureName" />

Answer 2

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

模板驱动的表单依赖于模板中的指令来创建和 操纵底层对象模型。它们对于添加 应用程序的简单表单，例如电子邮件列表注册表单。他们很容易 添加到应用程序中，但它们的扩展性不如反应式形式。如果 您有非常基本的表单要求和可以管理的逻辑 仅在模板中，模板驱动的表单可能是一个不错的选择。

IMO 避免使用生产软件的模板表单。它们的可扩展性和可测试性不够。

对于反应式表单，需要禁用表单控件。

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

Answer 3

还有另一种方法可以禁用它。

 [readonly]="view ? 'readonly' : null"

这将禁用输入字段