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

Question

我正在使用PrimeNG进行一个角度项目，我发现试图将文本表单的编辑禁用到字段中有以下困难。

基本上，在我的组件的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

第一种情况不起作用，因为它是模板驱动和反应表单的混合体。来自角文档

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

国际海事组织避免模板形式的生产软件。它们不够可扩展和可测试。

对于反应性表单，需要禁用窗体控件。

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

Answer 2

虽然它可能不是为了你所看到的，而不是

Disabled=“禁用”

我用过

Readonly=“只读”

来达到这个目的。该字段没有禁用，但不能更改，这是我的目标。

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