Angular，正在将输入字段重置为默认值

Question

在下面的示例中，我希望能够将输入字段重置为默认值，（在用户可能手动更改输入值之后）

主要问题是，默认值永远不会改变，因此重新设置它没有任何作用

模板

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

组件

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;
  }
}

Answer 1

尝试使用 [(ngModel)] 更新按钮点击时的值。

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

Answer 2

您可以使用 Template variable:

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

参见 StackBlitz 示例。

Angular，正在将输入字段重置为默认值

Angular, resetting input field back to a default value

javascript

data-binding

input

angular