提交后以角度 5 重置表单

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只会清除值而不更改状态。 来源

取决于需要做什么

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

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 3

使用reset()

尝试这个

this.myform.reset();

Answer 4

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

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

在你的 component.html

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

在你的 component.ts

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

Answer 5

你能试试这个吗

this.myform.reset();

另外，请参阅文档。

Answer 6

用于重置表单

f.reset()

请参阅链接了解更多详情。

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();
  }