Angular2 - 编辑/查看模式下的表单答案

【问题标题】：Angular2 - form in Edit / View modeAngular2 - 编辑/查看模式下的表单
【发布时间】：2017-04-13 12:55:48
【问题描述】：

我正在开发我的第一个 angular2 应用程序，我需要实现一个允许编辑和查看模式的表单。

在查看模式下，所有文本框项目都必须启用，否则当我处于查看模式时，我想显示简单的纯文本（如 span 元素）。

这样做的最佳做法是什么？

是否有一些标准组件或者我必须实现一些 ngIf ？

谢谢

【问题讨论】：

标签： angular angular-ng-if

【解决方案1】：

您可以使用*ngIf 在查看模式（包含常规插值）和编辑模式（包含表单）之间切换。即：

<form #myForm="ngForm">
    <div>
        <label>Var 1</label>
        <input *ngIf="editMode" type="text" name="var1" [(ngModel)]="var1" />
        <span *ngIf="!editMode">{{var1}}</span>
    </div>
</form>

这让您可以根据需要设置表单的样式，但代价是有第二行来显示值并使用*ngIf 标记所有内容。

已经提到的另一个选项是您可以使用以下方法禁用表单上的控件：

<input type="text" name="var1" [(ngModel)]="var1" [disabled]="!editMode"/>

【讨论】：

【解决方案2】：

您可以通过向每个输入字段添加条件来做到这一点，例如

<button type="submit" [disabled]="!myForm.form.valid">Enter</button>

这显然需要检查控制器文件中的某些表达式，例如

[disabled]="!isEditable"

如果是这样，您可以编辑该字段

【讨论】：

也可以使用 ngIf <div *ngIf="isEditable">form</div> 或 <div *ngIf="!isEditable">form</div> 来做到这一点