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