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

提交后重置ngForm在Angular 9中不起作用

在Angular 9中,要重置ngForm,可以使用resetForm()方法。该方法可以将表单的状态重置为初始状态,并清除所有已输入的值。

下面是一个完善且全面的答案:

在Angular 9中,要重置ngForm,可以使用resetForm()方法。该方法可以将表单的状态重置为初始状态,并清除所有已输入的值。

ngForm是Angular中的一个指令,用于处理表单的验证和提交。当我们需要重置表单时,可以使用resetForm()方法。

resetForm()方法是ngForm指令的一个成员方法,用于重置表单。调用该方法后,表单的状态将被重置为初始状态,所有已输入的值将被清除。

使用resetForm()方法的示例代码如下:

代码语言:txt
复制
import { Component, ViewChild } from '@angular/core';
import { NgForm } from '@angular/forms';

@Component({
  selector: 'app-form',
  template: `
    <form #myForm="ngForm">
      <input type="text" name="name" ngModel>
      <button (click)="resetForm()">重置</button>
    </form>
  `
})
export class FormComponent {
  @ViewChild('myForm', { static: true }) form: NgForm;

  resetForm() {
    this.form.resetForm();
  }
}

在上面的示例代码中,我们通过@ViewChild装饰器获取了表单的引用,并将其赋值给form变量。然后,在resetForm()方法中调用了form的resetForm()方法,实现了重置表单的功能。

需要注意的是,resetForm()方法只会重置表单的状态和已输入的值,不会清除表单中的验证规则。如果需要清除验证规则,可以在调用resetForm()方法之前,使用clearValidators()方法清除验证规则。

总结一下,重置ngForm的步骤如下:

  1. 在组件中引入NgForm指令,并使用@ViewChild装饰器获取表单的引用。
  2. 在需要重置表单的方法中,调用表单的resetForm()方法。
  3. 如果需要清除验证规则,可以在调用resetForm()方法之前,使用clearValidators()方法清除验证规则。

推荐的腾讯云相关产品:腾讯云云服务器(CVM)和腾讯云对象存储(COS)。

腾讯云云服务器(CVM)是腾讯云提供的弹性计算服务,可以快速创建和管理云服务器实例。它提供了丰富的配置选项和灵活的扩展能力,适用于各种规模的应用和业务场景。了解更多信息,请访问:腾讯云云服务器(CVM)产品介绍

腾讯云对象存储(COS)是腾讯云提供的高可靠、低成本的云存储服务,适用于存储和处理各种类型的数据。它具有高可用性、高可靠性和高扩展性,可以满足不同应用场景的存储需求。了解更多信息,请访问:腾讯云对象存储(COS)产品介绍

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

相关·内容

AngularDart4.0 指南- 表单 顶

在内部,Angular创建NgFormControl实例,并使用Angular附加到标签的NgForm指令注册它们。...每个NgFormControl都是您分配给ngControl指令的名称下注册的。 本指南稍后将详细介绍NgForm。...用ngSubmit提交表单 用户应该能够填写表单提交这个表单。表单底部的Submit按钮本身不做任何事情,但是由于它的类型(type =“submit”),它会触发一个表单提交。...正如前面所解释的,变量heroForm被绑定到整体管理表单的NgForm指令。 NgForm指令 Angular自动创建并附加一个NgForm指令给标签。...对你来说,这很简单: (增强的)表单元素上定义一个模板引用变量。 多处的按钮中引用该变量。 显示Model(可选) 提交表单目前没有视觉效果。 如预期的演示。

17.5K30
  • Angular系列教程-第四节

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

    2.8K50

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

    使用 ngModel 进行模板绑定时,angular form 标签上自动附加了一个 NgForm 指令,因为 NgForm 指令会控制表单中带有 ngModel 指令和 name 属性的元素,而...name 属性则是 angular 用来注册控件的 key,所以表单中使用 ngModel 进行双向数据绑定时,必须要添加 name 属性 4.2.2、跟踪表单控件的状态 表单中使用 ngModel...在数据验证失败的情况下,对于系统来说,表单是不允许提交的,因此可以将提交事件绑定到表单的 ngSubmit 事件属性上,通过模板引用变量的形式,提交按钮处进行数据有效性判断,当无效时,禁用表单的提交按钮...public name = new FormControl(''); constructor() { } ngOnInit(): void { } } 当在组件中创建好控件实例,...{ 'nameInvalid': true } : null; } } 当实现了继承的 validate 方法,就可以模板的控件上添加该指令

    18.9K20

    Angular2 :从 beta 到 release4.0 版本升级总结

    组件迁移,无法正确订阅事件 原因:angular(v4.0.0)中依赖注入,若在不同地方声明provider,则会创建不同的实例。...升级angular(v2.4.0)到(v4.1.1)版本,左侧导航的状态定位失效 原因:升级,router和component的hook顺序调整(仅根据个人观察,未经验证),导致组件状态未能在路由事件结束...使用angular-cli无法自定义webpack的alias, 导致文件引入路径很长,如../../../shared/。...)版本,组件迁移状态更新失效 原因:升级,component的hook顺序调整,导致组件状态未能在component状态更新完成更新。...11.升级angular到(v4.1.1)版本,等带动态src等属性触发error 原因:angular2启用安全无害化处理,为防止XSS等攻击,具体可参考官方文档安全。

    8.1K00

    AngularDart4.0 指南- 模板语法二 顶

    例如,重新查询服务器可能会重置所有新的英雄对象的列表。 大多数,如果不是全部,以前显示的英雄。 你知道这一点,因为每个英雄的ID没有改变。 但是Angular只能看到新的对象引用列表。...NgForm指令这样做。 以下是Forms指南中表单示例的简化版本。...heroForm是一个Angular NgForm指令的引用,可以跟踪表单中每个控件的值和有效性。 原生元素没有form属性。...但是NgForm指令有,它解释了如果heroForm.form.valid无效并且将整个表单控件树传递给父组件的onSubmit方法,您可以禁用提交按钮。...对于这些小型转换来说,Angular 管道是一个很好的选择。 管道是简单的函数,它接受一个输入值并返回一个转换的值。

    29.9K20

    Angular中sweetalert弹框的使用详解

    所以我就想办法将sweetalert用到项目中,项目中引入sweetalert时,遇到诸多问题,但最终我不懈坚持下,都解决了,实现了效果。具体用法请看下文。...2、确认提示框 1 swal({ 2 title: "提交", 3 text: "确定提交吗", 4 icon: 'info',...3、成功信息提示 1 swal("提交", "提交成功成功", 'success'); 效果: ? 4、错误信息提示 1 swal("删除", "删除成功", 'error'); 效果: ?...五、相关问题 1、传函数错误 Swal(“确定提交吗”,  function(){}, ‘error’ );  //这种写法我用的这个版本中是错误的,我的这个版本支持then(), 不支持直接在参数中写方法...2、API问题 在这个版本中以下写法只能实现title和text的效果,其他属性都不起作用 1 swal({ 2 title: "确定删除吗?"

    2.8K40

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

    一旦安装了它们,我们将通过运行以下命令来安装Angular CLI: npm install -g @angular/cli 安装成功,我们可以通过运行以下ng new命令来生成一个新项目: ng new...之后,我们可以调用我们的addCard方法,该方法中,我们onCardAdd从我们的卡片中输出Angular 文本,并将卡片文本重置为空字符串,以便用户可以继续添加新卡片而无需编辑旧卡片的文本。...如果我们需要更复杂的东西,那么Angular中有一种不同的形式:反应式。我们将介绍转换表单他们的反应。...如果不起作用,我们的行动中哪里会派遣?...如果我们现在打开我们的应用程序并查看开发者控制台的网络标签,我们会看到cards.module.chunk.js只有我们点击/cards链接才会加载。

    42.6K10

    您必须知道的 Git 分支开发规范,附 Git 常用命令大全!

    develop 分支:develop 为开发分支,始终保持最新完成以及 bug 修复的代码;一般开发的新功能时,feature 分支都是基于 develop 分支下创建的。...如果测试过程中若存在 bug 需要修复,则直接由开发者 release 分支修复并提交。...提交日志规范:一个团队协作的项目中,开发人员需要经常提交一些代码去修复 bug 或者实现新的 feature。而项目中的文件和实现什么功能、解决什么问题都会渐渐淡忘,最后需要浪费时间去阅读代码。...来自 Github 上的 Angular 规范是目前使用最广的写法,比较合理和系统化。如下图: ? Commit messages 的基本语法规范。...commit,同时重置暂存区,但工作区不变 $ git reset [commit] # 重置当前分支的HEAD为指定commit,同时重置暂存区和工作区,与指定commit一致 $ git reset

    74220

    关于请求被挂起页面加载缓慢问题的追查

    Angular整个项目中的前端部分扮演了很重的角色。树大招风,理所当然。...但最后针对该问题进行修复的代码提交却是今年6月份,2014年6月24日,提交时间摆在那里我会乱说? ? 于是好奇为什么会拖了这么久,遂跟了一下该问题下面的回复看看发生了什么。简直惊呆了。...链接被重置第三次尝试的时候正常了,于是正确返回,我们才看到了被解析的响应头被展示了下面。也就是说在出问题的时候要么响应头未拿到,要么响应头非法导致解析不成功。而原因就是链接被重置。...,21秒收到服务器的重置信息。...是什么让浏览器21秒才收到重置信息?服务器作出反应过慢还是网络原因?

    4.6K20

    Git与IDEA: 解决`dev`分支切换问题及其背后原因 为何在IDEA中无法切换到`dev`分支?全面解析!

    今天,我要与你们分享一个IDEA中与Git集成时常遇到的问题,以及我是如何一步步解决它的。 Git中的分支机制 Git中,分支是实现并行开发的关键。...它使开发者能够同一代码库中同时开发多个功能或修复。 问题描述 使用IDEA或其他IDE工具与Git集成时,可能会遇到一个常见的问题:尝试从远程仓库拉取项目,无法切换到dev分支。 ️...: git checkout -b dev origin/dev 确保没有冲突: 查看工作区和暂存区,确保没有未提交的更改: git status 拉取最新的dev分支: 保持dev分支与远程版本同步...: git pull origin dev 查看日志: 获取更多关于错误的信息: git log --oneline 清理和重置: 如果其他方法都不起作用重置dev分支到远程的状态: git fetch...感谢你的阅读,如果你有任何问题或想法,欢迎评论区留言。让我们继续技术的道路上一起探索和成长!

    33610

    ng 核心模块

    ngApp指令指定应用的根元素并且通常放置接近页面的根元素 – 例如 body或者html标签上。...使用Angular标记类似于{{hash}}一个href属性中,如果点击的时机早于Angular替换{{hash}}标记将导致连接到错误的URL。...使用Angular 标记例如{{hash}}一个src属性中不能正确工作:浏览器将从带有{{hash}}的URL中获取资源直到Angular替换了这个表达式。使用ngSrc指令可以解决这个问题。...使用Angular 标记例如{{hash}}一个srcset属性中不能正确工作:浏览器将从带有{{hash}}的URL中获取资源直到Angular替换了这个表达式。...如果元素上的ngDisabled表达式计算得出真,这个指令将设置disabled指令到元素上 ngChecked The HTML specification does not require browsers

    1.2K10

    Git 的奇技淫巧

    Git常用命令集合,Fork于tips[1]项目 Git是一个 “分布式版本管理工具”,简单的理解版本管理工具:大家写东西的时候都用过 “回撤” 这个功能,但是回撤只能回撤几步,假如想要找回我三天之前的修改...开卷必读 如果之前未使用过 Git,可以学习 Git 小白教程[1]入门 1.一定要先测试命令的效果,再用于工作环境中,以防造成不能弥补的后果!...git reset –mixed HEAD^ #回退至上个版本,它将重置HEAD到另外一个commit,并且重置暂存区以便和HEAD相匹配,但是也到此为止。工作区不会被更改。...0013739516305929606dd18361248578c67b8067c8c017b000/00137602359178794d966923e5c4134bc8bf98dfb03aea3000 [6] Angular...团队提交规范: https://github.com/angular/angular.js/blob/master/DEVELOPERS.md#-git-commit-guidelines [7] cz-cli

    1.2K21
    领券