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

如何将表数据重置为在模板驱动的表单Angular 12中编辑之前的状态

在模板驱动的表单Angular 12中,要将表数据重置为编辑之前的状态,可以使用Angular的ReactiveFormsModule中提供的reset()方法。

具体步骤如下:

  1. 首先,在组件的类中引入ReactiveFormsModule,并在NgModule中导入FormsModule和ReactiveFormsModule。
代码语言:txt
复制
import { Component, OnInit } from '@angular/core';
import { FormGroup, FormBuilder } from '@angular/forms';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponent implements OnInit {
  form: FormGroup;

  constructor(private formBuilder: FormBuilder) { }

  ngOnInit() {
    this.form = this.formBuilder.group({
      // 定义表单控件
    });
  }

  resetForm() {
    this.form.reset(); // 重置表单数据
  }
}
  1. 在模板中,使用resetForm()方法来触发表单重置操作。
代码语言:txt
复制
<form [formGroup]="form">
  <!-- 表单控件的HTML代码 -->
  
  <button type="button" (click)="resetForm()">重置</button>
</form>

这样,当点击重置按钮时,表单数据将会被重置为编辑之前的状态。

在Angular中,使用模板驱动的表单可以方便地进行表单数据的绑定和验证。Angular提供了丰富的表单控件和验证器,可以满足各种复杂的表单需求。

推荐的腾讯云相关产品:腾讯云云服务器(CVM)、腾讯云数据库MySQL版、腾讯云对象存储(COS)等。你可以通过访问腾讯云官网(https://cloud.tencent.com/)了解更多关于这些产品的详细信息和使用指南。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

AngularDart4.0 指南- 表单

一路上你将学习如何: 用组件和模板构建一个Angular表单。 使用ngModel创建读取和写入输入控制值双向数据绑定。 跟踪状态变化和表单控件有效性。...模板驱动形式 您可以通过使用本页中描述特定于表单指令和技术Angular模板语法中编写模板来构建表单。 您也可以使用响应式(或模型驱动)方法来构建表单。...但是,此页面重点介绍模板驱动表单。 您可以使用Angular模板 构建几乎任何表单- 登录表单,联系表单和几乎任何业务表单。...创建一个基本表单 一个Angular表单有两个部分:一个基于HTML模板和一个组件类,以编程方式处理数据和用户交互。 从课程开始,因为它简要地说明了英雄编辑可以做什么。...提交标志变为真,表格消失。 您将看到表格中显示英雄模型值(只读)。 ? 该视图包含一个编辑按钮,其单击事件绑定将清除提交标志。 当您单击编辑按钮时,该消失,并且可编辑表单重新出现。

17.5K30

一个Angular 5教程:一步一步指导实现你第一个Angular 5应用程序

之后,我们可以调用我们addCard方法,该方法中,我们onCardAdd从我们的卡片中输出Angular 文本,并将卡片文本重置空字符串,以便用户可以继续添加新卡片而无需编辑旧卡片文本。...使用表单 Angular中使用表单有两种方法 - 一种是模板驱动,我们已经使用其中最有价值部分:ngModel用于双向绑定。但是Angular形式不仅仅关于模型价值,也关系到有效性。...目前,我们HostListener函数中检查NewCardInput有效性。让我们将其移至更多模板驱动表单。...使用模板驱动表单与以前使用简单HTML表单完全相同。如果我们需要更复杂东西,那么Angular中有一种不同形式:反应式。我们将介绍转换表单后他们反应。...代码中定义了反应式表单而不是模板驱动表单,因此我们更改NewCardInput组件代码: [...] import {FormBuilder, FormGroup, Validators} from

42.6K10
  • Angular 从入坑到挖坑 - 表单控件概览

    响应式表单 建立表单 由组件隐式创建表单控件实例 组件类中进行显示创建控件实例 表单验证 指令 函数 表单数据发生变更时,模板驱动表单通过修改 ngModel 绑定数据模型来完成数据更新,...将数据值和一些对于用户行为约束(某个字段必须填啊、某个字段长度超过了长度限制啊)绑定到组件模板中,从而完成与用户交互 4.2.1、模板驱动表单双向数据绑定 根模块中引入 FormsModule...name 属性则是 angular 用来注册控件 key,所以表单中使用 ngModel 进行双向数据绑定时,必须要添加 name 属性 4.2.2、跟踪表单控件状态 表单中使用 ngModel...同模板驱动表单数据有效性验证相同,响应式表单中同样可以使用原生表单验证器,设定规则时,需要将模板中控件名对应数据第二个参数改为验证规则 响应式表单中,数据源来源于组件类,因此应该在组件类中直接把验证器函数添加到对应...模板驱动表单中,因为不是直接使用 FormControl 实例,因此这里应该在模板上添加一个自定义指令来完成对于控件数据校验 使用 angular cli 创建一个用来进行表单验证指令 ng

    18.9K20

    Angular系列教程-第四节

    1.表单 Angular 提供了两种不同方法来通过表单处理用户输入:响应式表单模板驱动表单。...,FormBuilder 等类构建出数据对象就是响应式表单,响应式表单中,我们会在数据源里面进行各种操作,像添加校验等,html文件中使用 formGroup,formGroupName,formControlName...等将数据和视图进行绑定(需要引入ReactiveFormsModule) 模板驱动表单是我们实例化好一个类数据之后,html中使用 NgForm 指令后将数据表单进行绑定,使用[(ngModel...)]来将表单数据和和视图进行双向绑定,NgForm 指令 form 增补了一些额外特性。...总结 响应式表单是动态模板驱动表单是固定 2.响应式表单使用 注册ReactiveFormsModule 组件导入FormControl 模板中注册组件 控件值(获取setvalue

    2.8K50

    (转) 别再对 Angular 表单 ControlValueAccessor 感到迷惑

    FormControl 和 ControlValueAccessor 如果你之前使用过 Angular 表单,你可能会熟悉 FormControl ,Angular 官方文档将它描述追踪单个表单控件值和有效性实体对象...需要明白,不管你使用模板驱动还是响应式表单(译者注:即模型驱动),FormControl 都总会被创建。...image.png 再次强调,不管是使用响应式表单显式创建还是使用模板驱动表单隐式创建,ControlValueAccessor 都总是和 Angular 表单控件进行交互。...组件封装器 由于 Angular 所有默认原生控件提供了控件值访问器,所以封装第三方插件或组件时,需要写一个新控件值访问器。...但是,我们想要是,使用 slider 组件作为表单一部分,并使用模板驱动表单或响应式表单指令与其数据通信,那就需要让其实现 ControlValueAccessor 接口了。

    3.8K20

    AngularDart4.0 指南 原

    指南 1.概述       本文档Angular高级部分,如果你刚接触Angular,请先学习Angular。...指南 了解Angular基础知识,如本地开发 安装, 显示数据和接受用户输入,构建简单表单, 将应用程序服务注入到组件中,以及使用Angular模板语法。...示例代码 每个页面都包含页面随附示例应用程序代码段。 您可以应用程序中重用这些片段。 参考页 词汇定义Angular开发人员应该知道术语。...如果您想更改项目的名称,请使用适合您应用程序名称进行项目范围搜索和替换pubspec名称条目(angular_app)的当前值 - 通常它将与 您之前选择目录名称。    ...6.阅读表单,其中涵盖用户界面中数据输入和验证。     7.阅读依赖注入,了解如何从小型单用途零件构建大型,可维护应用程序。

    2.7K20

    AngularDart4.0 英雄之旅-教程-03英雄编辑

    构建结构 开始编写代码之前,让我们验证一下你结构。 如果没有,您需要返回并按照上一页设置说明进行操作。 ? 如果该应用尚未运行,请启动该应用。...用户应该可以文本框中编辑英雄名字。...数据两个方向流动:从属性到文本框,从文本框返回到属性。 表单模板语法页面中阅读有关ngModel更多信息。 @Component(指令:...)...模板中使用任何Angular指令之前,需要在组件@Component注解指令参数中列出它们。...您使用Dart模板字符串编写了多行模板,以使模板可读。 您使用内置ngModel指令向元素添加了双向数据绑定。 此绑定显示Hero名称,并允许用户更改它。

    3.2K10

    Angular 2 表单(上)

    本章节我们将为大家介绍如何使用组件和模板构建一个 Angular 表单。...利用 Angular 模板,我们可以创建各种类型表单,例如:登录表单,联系人表单,商品详情表单等,而且我们也这些表单字段添加数据校验。 接下来我们一步步来实现表单功能。...解压后,修改目录名为angular-forms,修改 angular-forms/package.json 文件中 "name": "angular-quickstart" "name": "angular-forms...创建一个表单组件 每个 Angular 表单分为两部分:一个基于 HTML 模板,和一个基于代码组件,它用来处理数据和用户交互。...因为模板驱动表单有它们自己模块,所以我们得把 FormsModule 添加到本应用 imports 数组中,这样我们才能使用表单

    1.5K10

    Angular 6.x 快速入门

    第二节 - 插值表达式 Angular 中,我们可以使用插值语法实现数据绑定。...基础知识 定义组件元信息 Angular 中,我们可以使用 Component 装饰器来定义组件元信息: @Component({ selector: 'my-app', // 用于定义组件...name = 'Angular'; } 定义数据接口 TypeScript 中接口是一个非常灵活概念,除了可用于对类一部分行为进行抽象外,也可用于对「对象形状(Shape)」进行描述...this.showSkills; } } 第六节 - 表单模块简介 Angular 中有两种表单: Template Driven Forms - 模板驱动表单 (类似于 AngularJS...1.x 中表单 ) Reactive Forms - 响应式表单 本小节主要介绍模板驱动表单,接下来我们来演示如何通过表单我们之前创建 UserComponent 组件,增加让用户自定义技能功能

    14.1K20

    Angular 2 + 折腾记 :(7) 初步了解表单模板驱动数据驱动及脱坑要点

    首先需要操作表单模块引入这两个模块; import { FormsModule, ReactiveFormsModule } from '@angular/forms'; ---- 表单控件响应几种状态...模板驱动表单依赖FormsModule,数据驱动表单依赖FormsModule,ReactiveFormsModule 一般做表单校验及操作推荐用数据驱动方式,好维护和理解。。...---- 模板驱动 模板驱动:主要是依赖[(ngModel)]和#scope_var以及原生表单控件属性(require,minlenght,maxlength等)来操作表单值亦或者校验 一个最简单例子...; Submit()函数内,点击提交时候对整个表单一一去判断,传统方式基本这样 每个控件输入时候对应去触发对应事件做校验,比如[ngModelChange]来处理双向绑定值校验 ---- 数据驱动...=》 可以理解获取且可以操作整个表单数据 FormBuilder:表单数据构建工具[构建初始表单],简化构建代码(包括了new FormGroup(),new FormControl(),new

    3.8K20

    浅谈 Angular 项目实战

    联调接口时,可能还会遇到传输 Cookie 问题,具体可以参见 关于 Angular 跨域请求携带 Cookie 问题。...Angular 提供了两种表单模板驱动表单及响应式表单。...其中模板驱动表单简单灵活,适用于不复杂表单数据。 关于表单这一块,我们将 Angular 和 Vue 放在一起说,Vue 表单绑定就属于模板驱动表单。...不过 Angular 模板驱动表单并没有复选框多选绑定,如果有这个需求,可以选择更加灵活强大响应式表单进行数据绑定。其实,对于数组形式数据可以使用天然 select 多选框实现。...通过 Angular 响应式表单可以很容易实现。但是对于模板驱动表单也可以用另类方式实现,比如手动实现一个双向数据绑定,虽然有点麻烦,但却是可行。关于这个话题我放到下一篇文章中说明。

    4.6K00

    Angular8稳定版修改概述

    这允许现代用户代理和旧用户代理中经典脚本中选择性地执行模块脚本. SVG作为模板 您现在可以将SVG文件用作模板。到目前为止,我们只能选择使用内联HTML或外部HTML作为模板。...Bazel将提供以下优势: 更快构建时间(对于第一次构建需要时间,但并发构建将更快),Angular已经使用它,现在CI7.5分钟内完成,而不是Bazel之前60分钟。...懒加载变动 新版本不推荐使用loadChildren:string 懒惰加载模块语法。 8.0.0之前,懒加载使用方法如下: loadChildren: '....支持 Angular团队希望使用AngularJS所有开发人员提供支持,并帮助他们升级到Angular。...一个域中支持多个应用。 阅读Angular Doc上有关服务工作者更多信息。 表单改进 添加了markAllAsTouched方法以标记所有的控件FormGroupas as touched。

    4.5K20

    angular面试题及答案_angular面试

    angular每次销毁组件或指令之前调用,通常用于移除事件监听,退订可观察对象。...双向数据绑定原理 data => view:数据绑定,模板语法 [ ] view => data: 事件绑定,模板语法() angular双向数据绑定就是 数据绑定 + 事件绑定 ,模板语法 [...Observables 和Promises区别 Observables 是惰性,意思是subsciption之前什么都不会发生。...它是一个帮助我们维护应用程序状态库。简单数据流应用程序不需要Redux,它用于具有复杂数据单页应用程序。 18. 什么是Pipes?...32.模板驱动表单和 响应式表单比较 Template-Driven Forms (模板驱动表单) 特点 使用方便 适用于简单场景 通过 [(ngModel)] 实现数据双向绑定

    11K120

    angular入门教程_初学者织围巾简单教程慢动作

    -4 路由守卫 5-5 多重出口 6-1 表单快速上手 6-2 双向数据绑定 6-3 表单校验 6-4 模型驱动表单 6-5 动态表单 7 服务 8 RxJS 快速上手教程 9 国际化 10 自动化测试...当然,安装 @angular/cli 之前你需要先把 NodeJS 安装好,请到官方网站下载安装包: https://nodejs.org/ ,安装过程和普通软件没有区别。...默认情况下,ng 命令生成出来组件都会带上一个 app 前缀,如果你不喜欢,可以 angular-cli.json 里面修改 prefix 配置项,设置空字符串将会不带任何前缀。...模板局部变量 属性绑定、事件绑定、双向绑定 模板里面使用结构型指令 *ngIf、*ngFor、ngSwitch 模板里面使用属性型指令 NgClass、NgStyle、NgModel 模板里面使用管道格式化数据...第6-4课:表单:模型驱动表单 第6-5课:表单:动态表单 第7课:服务 第8课: RxJS 快速上手教程 第9课:国际化 第10课:前端自动化测试 第11课:参考资源 阅读全文: http

    3.3K20

    Angular 2 + 折腾记 :(2)初步认识angular2,不一样开发模式

    ---- 基础概念 国内官网--基础 词汇(又名计算机术语--angular2 & es6 & es7) 速查表:又名demo写法,里面涵盖了很多写法,相当于一本小字典 关于ng2一堆为什么:...:组件逻辑处理 // 导入装饰器:装饰器可以理解一些函数封装,使其书写起来非常简洁明了 import { Component } from '@angular/core';...,ng2开发模式就是类似一个树,从根节点无限发散 import { NgModule } from '@angular/core'; // 表单模块,比如你要在组件内用到一些表单元素或者数据绑定...特殊之处后面解释 [(target)]: 双向数据绑定,视图和数据源同步改动。。一般用于表单比较多。...---- 总结 这一篇没有涉及到路由这些和表单这些; 准备拆成两个文章来说; 路由配置及懒加载这些, 模板驱动表单及响应式表单[嵌套表单响应等],回车键触发搜索等。。

    6.2K20

    Angular6自定义表单控件方式集成Editormd

    ControlValueAccessor 这是自定义表单组件核心,只有继承这个接口,才有被 AngularformControl识别的资格。...(isDisabled: boolean): void; } writeValue:初始化时候将formControl值传递给原生表单控件(即,将模型中新值写入视图或 DOM 属性中); registerOnChange...:用来获取原生表单控件值更新时通知Angular表单控件更新函数(即,设置当控件接收到 change 事件后,调用函数) registerOnTouched:用来获取通知用户正在交互函数(即,设置当控件接收到...(isDisabled: boolean):设置DISABLED状态时做执行方法。即,当控件状态变成 DISABLED 或从 DISABLED 状态变化成 ENABLE 状态时,会调用该函数。... 参考资料 Angular 4.x 自定义表单控件 【荐】深入Angular自定义表单控件 Angular集成Editor.mdMarkdown编辑器,支持NgModel

    5.2K20
    领券