首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Angular 4更新后重置表单-保留ngModel值(使用ngForm)

Angular 4更新后重置表单-保留ngModel值(使用ngForm)

在Angular 4中,可以使用ngForm指令来管理表单,并且可以通过重置表单来清除用户输入的值。但是,如果想要在重置表单后保留ngModel的值,可以按照以下步骤进行操作:

  1. 在HTML模板中,使用ngForm指令包裹整个表单,并给表单添加一个本地引用变量,例如#myForm。
代码语言:txt
复制
<form #myForm="ngForm">
  <!-- 表单控件 -->
</form>
  1. 在组件中,使用@ViewChild装饰器来获取表单的引用,并在重置表单时保留ngModel的值。
代码语言:txt
复制
import { Component, ViewChild } from '@angular/core';
import { NgForm } from '@angular/forms';

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.css']
})
export class MyComponent {
  @ViewChild('myForm') myForm: NgForm;

  resetForm() {
    this.myForm.resetForm({ value: this.myForm.value });
  }
}
  1. 在重置表单的方法中,调用resetForm()方法,并传入一个对象作为参数,该对象的value属性设置为当前表单的值。
  2. 这样,在重置表单后,ngModel的值将会被保留。

关于Angular表单的更多信息,可以参考腾讯云的相关产品和文档:

  • Angular表单:介绍了Angular中的表单处理方法和相关概念。
  • 腾讯云云开发:提供了一站式的云开发平台,包括前端开发、后端开发、数据库等功能,方便开发者快速构建应用。
页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

  • 领券