f.reset（）

Question

 <form class="form-horizontal" name="form" (ngSubmit)="!f.form.invalid && staffDetails(model)" #f="ngForm" novalidate>


 <div class="form-group"><button [disabled]="f.invalid" *ngIf ="buttonSave" class="btn btn-info">Save</button></div>

点击提交按钮后，重新提交未获取值时不刷新页面

Answer 1

reset将清除整个表单并将其状态移回原始状态（不进行任何验证），而resetForm仅清除值而不更改状态。 Source

取决于需要做什么

html文件

<form #f="ngForm" (ngSubmit)="onSubmit(f)">

ts文件

protected onSubmit(f: NgForm): void {

        // code here

        f.resetForm(); or f.reset();
    }

将定义为f的表单实例传递给submit函数，并进行重置 Source

Answer 2

使用reset()

尝试

this.myform.reset();

Answer 3

在使用模板驱动的表单时，请尝试此操作。

使用(ngSubmit)事件来处理表单提交事件。并将表单作为参数传递给事件处理程序。 (ngSubmit)="onFormSubmit(f)

在您的component.html

中

 <form class="form-horizontal" name="form" (ngSubmit)="onFormSubmit(f)" #f="ngForm" novalidate>

在您的组件中。

public onFormSubmit(ngForm: ngForm): void {
   // !f.form.invalid && staffDetails(model)
   ngForm.form.reset();
}

Answer 4

您可以尝试一下

this.myform.reset();

另外，请参考document。

Answer 5

用于重置表单

f.reset（）

有关更多详细信息，请参阅the link。

Answer 6

HTML组件

在已添加的表单标签中添加＃f =“ ngForm”

 <form class="form-horizontal" name="form" (ngSubmit)="!f.form.invalid
    && staffDetails(model)" #f="ngForm" novalidate>
   <!-- form inputs -->
 </form> <!-- form closed>

逻辑组件，即TS文件

import { ViewChild } from '@angular/core';

  @ViewChild('f') myForm; //feth reference of form using ViewChild property

声明后，我们可以使用重置功能重置表单

staffDetails(data){

     this.myForm.resetForm(); //now the form is reset
}

此功能的工作模块：-https://angular-xtzntk.stackblitz.io/

Answer 7

要在提交时重置完整表单，可以在Angular中使用reset（）。下面的示例在Angular 8中实现。下面是一个“订阅”表单，其中我们将电子邮件作为输入。

<form class="form" id="subscribe-form" data-response-message-animation="slide-in-left" #subscribeForm="ngForm"
(ngSubmit)="subscribe(subscribeForm.value); subscribeForm.reset()">
<div class="input-group">
   <input type="email" name="email" id="sub_email" class="form-control rounded-circle-left"
      placeholder="Enter your email" required ngModel #email="ngModel" email>
   <div class="input-group-append">
      <button class="btn btn-rounded btn-dark" type="submit" id="register"
         [disabled]="!subscribeForm.valid">Register</button>
   </div>
</div>
</form>

官方文档：https://angular.io/guide/forms#show-and-hide-validation-error-messages

Answer 8

角度：8.2.11
在模板中：HTML

<form #f="ngForm" [formGroup]="postForm" (keydown.enter)="$event.preventDefault()" (ngSubmit)="onSubmit(f)">

在组件中：打字稿

async onSubmit(f: NgForm) {
    f.reset();
  }

提交后将表格重置为角度5

8 个答案:

f.reset（）