En el siguiente ejemplo, quiero poder restablecer el campo de entrada al valor predeterminado (después de que el usuario haya cambiado el valor de entrada manualmente)
el problema principal es que el valor predeterminado nunca cambia, por lo que restablecerlo no hace nada
Modelo
<div> <label>Select a number </label> <input [value]="defaultValue" /> <button (click)="onClick()">Reset to default Number</button> </div>Componente
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; } }Podrías usar la variable Plantilla :
<input [value]="defaultValue" #input /> <button (click)="input.value = 10">Reset to default Number</button>Ver ejemplo de StackBlitz .
Intente usar [(ngModel)] para actualizar el valor al hacer clic en el botón.
<input [(ngModel)]="defaultValue" />