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

Question

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

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

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

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

谢谢

Answer 1

您可以通过为每个输入字段添加条件来实现，例如

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

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

[disabled]="!isEditable"

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

Answer 2

您可以使用 *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"/>

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

Angular2 - form in Edit / View mode

angular-ng-if

angular