I am utilizing a form in angular 2 that includes two-way binding data value ([(ngModel)]) to enable both edit and add functionality.
When a user selects the edit option on the listing page and modifies the input, the new values automatically appear on the list page. Rather than saving, the user can click the cancel button to revert back to the old value which should be displayed on the listing page.
project-form.component.html
---------------------------
<input class="form-control" type="text" size="30" pInputText [(ngModel)]="project.title" name="title" pTooltip="Enter your username"/>
<ul class="list-group">
<li *ngFor="let event of project" class="list-group-item">
<span class="event_release">{{event.startDate | date: 'dd/MM/yyyy'}} </span><br />
<strong>{{event.title}}</strong>
</li>
</ul>
Project-form.component.ts
-------------------------
@Input() project: Project;
Upon submission, the variable (this.project) is updated with the modified values thanks to two-way binding. However, if the user clicks the cancel button, the changes need to be rolled back to the original values stored in this.project.