Angular2 - form in Edit / View mode

Question

I'm working on my first angular2 application, I need to implement a form that allows edit and view mode.

In view mode all the textbox items must di enabled , otherwise when I'm in view mode I want to show simple plain text ( like span element ).

What is the best practice to do that?

Is there some standard component or I have to implement some ngIf ?

Thanks

Answer 1

You could use *ngIf to change between an View mode(contains regular interpolation) and Edit mode(contains the form). ie:

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

This let's you style the form however you want, but comes at the cost of having a second line to display the value and tagging everying with *ngIf.

The other option, that has already been mentioned, is you can disable the controls on the form using:

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

Answer 2

You can do this by adding a condition to each input field, for example

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

this obviously needs to check the controller file for some expression like

[disabled]="!isEditable"

If this is true you can edit the field