In the following example i want to be able to reset input field to default value, (after user might have changed the input value manually)

the main problem is, that default value never changes, so re-setting it does nothing

Template

<div>
  <label>Select a number </label>
  <input [value]="defaultValue" />
  <button (click)="onClick()">Reset to default Number</button>
</div>

Component

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  defaultValue = 10;
  onClick() {
    //wont work, because we are not changing the default.
    this.defaultValue = 10;
  }
}

CodePudding user response：

You could use Template variable:

<input [value]="defaultValue" #input />
<button (click)="input.value = 10">Reset to default Number</button>

See StackBlitz example.

CodePudding user response：

Try using [(ngModel)] to update the value on the button click.

<input [(ngModel)]="defaultValue" />

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>