angularangular-formsformgroupsangular-template-form

How to set the default values of template-driven form after edit but not saved in Angular without formgroup?

If I open the form and change the input field 'city' and click cancel. After that if I open the form again, the defualt value is changed. How to get that default value in the form field?

component

city:string = 'Chennai'

template

<form (ngSubmit)="f.form.valid && editUserCity()" #f="ngForm" novalidate>    
    <input type="text" name="city" [(ngModel)]="city" class="form-control" 
    placeholder="City" required #city="ngModel"
    [class.is-invalid]="f.submitted && city.invalid"
    >
    <button type="submit" class="greenbutton upperCase w200px">Save</button>      
</form>
Solution

  • I think the straightforward way would be using ngModel with one-way binding.

    example:

    <input type="text" name="city" [ngModel]="city" >

    With this one-way binding, it will not change the original city value.