Question

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

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

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

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

由于

Answer 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"/>

Answer 2

您可以通过为每个输入字段添加条件来执行此操作，例如

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

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

[disabled]="!isEditable"

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

Angular2 - 在编辑/查看模式下形成

2 个答案: