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

Posted 2023-03-13

【中文标题】为啥我不能阻止用户编辑 PrimeNG 表单字段值？

【英文标题】：Why I can't prevent that the user edit a PrimeNG form field value?为什么我不能阻止用户编辑 PrimeNG 表单字段值？

【发布时间】：2021-01-01 02:25:53

【问题描述】：

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

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

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

【问题讨论】：

尝试在你的组件中设置禁用，而不是作为 html 属性，[disabled] 属性在反应形式中是不允许的（至少你会得到警告）。 this.myGroup.get('UID').disable();

【参考方案1】：

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

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

IMO 避免生产软件的模板形式。它们的可扩展性和可测试性不够。

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

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

【参考方案2】：

虽然它可能不是你正在寻找的东西，而不是

[禁用]="禁用"

我用过

readonly="只读"

实现这一目标。该字段未禁用但无法更改，这是我的目标。

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