Angular：表单字段只读模式

Posted 2023-02-22

【中文标题】Angular：表单字段只读模式

【英文标题】：Angular: Form fields read-only mode

【发布时间】：2018-04-28 19:35:53

【问题描述】：

我有一些只能由某些用户编辑的表单。其他用户应该只能查看它。

目前，对于表单中的每个表单控件，我正在检查条件并显示表单控件或文本。比如，

<div>
    <input type="text" *ngIf="editable">
    <p *ngIf="!editable">value</p>
</div>

这似乎不是一种优雅的方式。请提出一种更简洁的方法来实现这一点，比如在顶层做一些事情。

【问题讨论】：

为什么不能创建 2 个不同的视图（只读和可编辑）而不是分别切换每个控件？

【参考方案1】：

由于您使用的是 Angular，因此最好使用 FormControls 和 FormGroups。看看this 指南。 使用 FormControl API，您可以以编程方式 enable 和 disable 输入。

另一种方法是使用property binding 并执行以下操作：

<div>
   <input type="text" [readonly]="!editable">
</div>

【讨论】：

没有。我不想使用readonly 或disabled 属性。我想显示一个静态元素，而不是像 select 或 input 这样的表单控件，但不单独切换每个控件。

我不确定我是否理解您的意思。如果您将输入设置为看起来像“静态”元素？

Angular 不鼓励绑定到 disabled 元素。我不能使用readonly，因为我的表单有select 元素，而readonly 对它们没有任何影响。此外，我主要不想单独切换每个元素。

【参考方案2】：

我认为你应该看看ng-disabled 指令。 这应该可以解决问题！

【讨论】：

您的链接适用于 Angular 1.x，问题来源是 Angular 2+。

对不起。答案在这里给出：***.com/questions/37159827/…