我希望能够使用其模型的一些默认值重置 Angular 表单
<form>
<input type="text" name="text" [(ngModel)]="model.text">
<button type="reset" (click)="resetModel()">Reset</button>
</form>
并在组件中
model = { text: 'Test' };
resetModel() {
this.model = { text: 'Test' };
}
这不起作用,因为在设置模型并且文本通过重置设置为空之后发生重置。
我能想到的唯一两件事是使用超时,就像我们曾经用类似的方式污染我们的 AngularJs 应用程序一样
resetModel() {
setTimeout(() => { this.model = { text: 'Test' }; });
}
https://stackblitz.com/edit/angular-5pdpml
或者使按钮成为普通的旧按钮而不是重置按钮,并将表单传递给重置方法并调用 markAsUntouched 和 markAsPristine。
我真的不喜欢这两个选项中的任何一个。
我尝试为输入提供一个值,以便重置具有默认值,但 Angular 仍将模型设置为 null,即使输入确实具有重置设置的文本。
有没有办法让重置按钮设置默认表单状态而不是将所有绑定设置为空?