Angular2 - 編集/表示モードでのフォーム

Question

私は最初のangle2アプリケーションで作業しています。編集モードと表示モードが可能なフォームを実装する必要があります。

ビューモードでは、すべてのテキストボックス項目を有効にする必要があります。そうでないとビューモードになっていると、単純なプレーンテキスト（スパン要素など）を表示します。

これを実行するベストプラクティスは何ですか？

いくつかの標準コンポーネントがありますか、いくつかのngIfを実装する必要がありますか？

おかげ

次の例のように、これは明らかに

[disabled]="!isEditable" 

ようないくつかの発現のためのコントローラファイルをチェックする必要がある

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

各入力フィールドに条件を追加することによってこれを行うことができます

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> 

これは、フォームは、しかし、あなたがしたいのあなたのスタイルを聞かせて、その値を表示するために第2ラインを有し、かつ *ngIfとeveryingをタグ付けを犠牲にしています。

すでに述べた他のオプションは、あなたが使用してフォーム上のコントロールを無効にすることができます：

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

Answer 2

これが当てはまる場合は、フィールドを編集することができます