在angular 6中重置模板表单，使用表单外的按钮
在Angular 6中重置模板表单，可以使用表单外的按钮来实现。以下是一个完善且全面的答案：
在Angular 6中，要重置模板表单，可以通过以下步骤来实现：
- 首先，在组件的HTML模板中，给表单添加一个标识符，例如
#myForm，并在表单元素中使用ngForm指令来绑定该标识符，如下所示：
<form #myForm="ngForm">
<!-- 表单元素 -->
</form>- 接下来，在组件的类中，导入
ViewChild装饰器和NgForm类，并在类中声明一个ViewChild变量来引用表单，如下所示：
import { Component, ViewChild } from '@angular/core';
import { NgForm } from '@angular/forms';
@Component({
// 组件配置
})
export class MyComponent {
@ViewChild('myForm') myForm: NgForm;
// 组件逻辑
}- 然后，在组件的方法中，可以通过调用
resetForm()方法来重置表单，如下所示：
resetForm() {
this.myForm.resetForm();
}- 最后，在HTML模板中，可以在表单外部添加一个按钮，并绑定点击事件到组件的重置表单方法，如下所示：
<form #myForm="ngForm">
<!-- 表单元素 -->
</form>
<button (click)="resetForm()">重置表单</button>这样，当点击"重置表单"按钮时，表单中的所有输入字段将被重置为初始状态。
关于Angular 6中表单的更多信息，你可以参考腾讯云的相关产品文档：
相关·内容
在angular 6中，我有一个带有以下标记的模板表单。<form (ngSubmit)="onMyFormSubmit(myForm)" #myForm="ngForm"><button (cbOnSuccess)="eraseThings()">
浏览 1提问于2018-07-12得票数 0
1回答
我是Angular/Typescript的新手，目前在Angular 10中使用模板驱动的表单。我尝试在不提交表单和不单击按钮的情况下重置表单。我已经检查过类似的问题，但它们都依赖于提交表单来重置表单。First Name"
class="for
浏览 7提问于2021-02-17得票数 0
我正在使用Angularjs ng-表单验证所需的。当我试图用空白表格保存时，它显示了填充值的错误。在我关闭模型并重新打开模型表单之后，验证通知将不会被清除。Sample
浏览 0提问于2015-05-29得票数 1
回答已采纳
3回答
我使用的是angular 6<form [formGroup]="myForm" > <input type="text" formControlName=我猜这是angular的一个小bug，它不能正确呈现html，所以我在定义表单时放入了我的组件：
myForm = this.formBuilder.group(
浏览 2提问于2018-07-26得票数 6
回答已采纳
4回答
角反应形式提交和清晰验证
、、、
newProduct) { //add product } 在添加产品后，我清除表单。但是，一旦清除了表单，就会触发验证错误。我希望验证错误仅在用户单击submit且表单无效时显示，而不是在提交后清除表单时显示。
我怎么才能解决这个问题？
浏览 0提问于2018-07-01得票数 7
回答已采纳
我试图找到最好的方式重置角反应形式。我有点搞不懂重置反应性表单，也找不到哪种方法是模板驱动的表单，哪种是反应性表单。现在，我使用'formGroupDirective‘重置，但我得到控制台错误，如下所示。
这就是我使用formGroupDirective进行重置的方法。模板文件：<form
...{ FormGr
浏览 2提问于2019-01-30得票数 3
回答已采纳
在Angular 2+中，是否可以通过编程方式将输入值重置为其先前的值？ 我有'Select‘下拉列表，在选择一个值后，如果某些验证失败，我需要将它的值重置为前一个值。如何使用ngModel (模板表单)和formControl (反应式表单)实现相同的功能？(只需要知道这两种方法是否可行)。我已经知道，如果我们在模板的</em
浏览 27提问于2019-01-28得票数 5
8回答
form-group"><button [disabled]="f.invalid" *ngIf ="buttonSave" class="btn btn-info">Save</button></div>
在未刷新页面的情况下单击提交按钮后
浏览 6提问于2018-07-20得票数 1
我有一个带有两个提交输入的HTML表单。其中一个重置申请表，另一个进入下一级：<input type="text" name="username" value="" required"submit" name="info" value="Next Step">
<input type=&q
浏览 0提问于2012-10-04得票数 0
回答已采纳
3回答
当我提交我的表单时，我有这个函数如果我尝试执行以下操作form.value.password = ''
登录失败后，我想重置密码字段。
浏览 3提问于2017-04-23得票数 3
回答已采纳
每次我尝试将数据发送到ts文件时，ngModel都会重置下拉菜单中的选择。entity.parameterValue" [value]="regTypeValue" 我也尝试过使用select和onClick，但是日期传输成功，并且每次我单击下面的搜索按钮时，下拉菜单中的选择
浏览 6提问于2020-12-01得票数 0
我需要在按钮是clicked.This之后清除文本框和选择列表，这是我尝试过的，但它似乎不起作用： <input type="text" ng-model="Model.CurrentDowntimeEvent.Comment</select>联署材料：
angula
浏览 1提问于2014-07-18得票数 0
回答已采纳
4回答
我有一个从表单发送数据到控制器的<form>和AJAX脚本。System.out.println("ID dialog is: " + iddialog); }但是当我提交<form>时，我需要防止重新加载我的页面。我看了很多指南，但这是我得到的最高的</e
浏览 1提问于2016-02-22得票数 1
2回答
从下拉菜单中选择答案并提交表单(id="quizgenerator)后，在以下代码行的帮助下，表单本身将替换为结果：
document.getElementById('quizgenerator').innerHTML现在到了棘手的部分，我不明白:我希望人们能够“回到”表单，再次参加测验，更改他们的答案，然后重新提交，看看他们最终会得到什么结果，而不需要重新加载页面。我不能向表单添加重置按钮</e
浏览 1提问于2013-04-16得票数 2
2回答
重置表单
、
在AngularJs中，我过去常常使用ng提交的类进行表单验证，但是当您提交表单时，它不会出现在Angular中。我已经编写了一个指令，用于添加提交到表单的类，并在重置时将其删除 selector: '[appForm]'export class FormDirective implementsngOnDestroy() {
if (this.subscription)
浏览 21提问于2019-09-30得票数 0
我在我的Angular2应用程序中有一个基于模板的表单，用于用户注册。在那里，我将表单实例传递给提交函数，并在完成对服务器的异步调用后重置from。 </div>
浏览 0提问于2017-05-19得票数 6
我在问一个问题，答案对我有很大帮助。当我填充我的Django form时，我按一个验证按钮来存储数据表单。然后，我被重定向到一个新页面(表单简历页，主页，.)。但是在我的浏览器中，如果我单击Back Button，我的表单中已经填充了以前的数据，并且我可以修改数据。
我的问题是:如何防止浏览器在使用Django导航时重新填充表单数据？这是个老掉牙
浏览 1提问于2017-03-01得票数 2
1回答
我是angular的新手，只是在angular 9和coreui管理模板中做了一个小的演示应用程序。我有一个简单的表单与一个文本框和一个禁用的按钮。现在，表单下面有一个带有一个编辑按钮的表格。在编辑时，我用行数据填充表单，并可以在启用按钮时再次提交它。在“编辑”中，单击“我的
浏览 17提问于2020-04-05得票数 0
我偶然发现了这个问题，因为铬浏览器中的黄色输入背景在以角4.3.5的角度重置窗体之后并没有消失。<form #myForm="ngForm"> <button (click)="htmlReset()">re
浏览 0提问于2017-08-26得票数 1
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
