表单重置后重置验证(ReactiveForms)

库马尔

HTML:

<form [formGroup]="locationForm" #myForm="ngForm" class="formContainer">

<div class="buttonContainer">
      <section class="btn1">
          <button 
          (click)="addAnotherMethod()"
          mat-raised-button 
          color="primary"> Add another method </button>
      </section>

      <section>
          <button
          (click)="addAnotherLocation()"
          mat-raised-button 
          color="primary"> Add another location </button>
      </section> 
    </div>

.TS 文件

@ViewChild('myForm') currentLocationForm;

addAnotherLocation(): void{
    if(this.locationForm.valid){
      //send data to redux
      }))
    }
    this.currentLocationForm.resetForm()
  }

addAnotherMethod: void {
    if(this.locationForm.valid){
     //send data to redux
      }))
    }
    this.currentLocationForm.resetForm()
  }

使用上面的代码,我可以在将数据发送到 redux 后重置表单,但重置后,新表单中的验证错误消息出现说要填写必填字段。我需要帮助以使用正确的方法重置此表单并在显示新表单时清除验证。我也可能使用错误的方法来调用两个按钮功能。谢谢你。

杰西

您的表单中有两件事:FormGroupFormGroupDirective. 要消除错误,您需要重置它们:

this.currentLocationForm.resetForm();
this.locationForm.reset();

有关原因的更多详细信息,请参阅帖子。

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

重置表单后未删除验证消息

来自分类Dev

关闭引导程序模式后如何重置angularjs的表单验证

来自分类Dev

提交后重置ReactJS表单

来自分类Dev

提交表单后重置表单字段

来自分类Dev

重置表单后,Angular 4反应式表单未清除验证

来自分类Dev

使用新值更新验证后,如何重置表单中的输入字段失败

来自分类Dev

使用新值更新验证后,如何重置表单中的输入字段失败

来自分类Dev

在Angularjs中提交后重置表单

来自分类Dev

更改innerHTML后重置HTML上传表单

来自分类Dev

提交后在Angular 2中重置表单

来自分类Dev

{React Native}提交后重置Formik表单

来自分类Dev

重置表单后jQuery .html()不更新

来自分类Dev

成功提交后重置表单字段

来自分类Dev

表单重置后禁用保存/提交按钮

来自分类Dev

保存 Angular 4 后重置表单

来自分类Dev

成功提交后重置aurelia验证

来自分类Dev

使用按钮从其他表单中重置表单验证

来自分类Dev

PHP表单验证,无需重置所有其他值

来自分类Dev

如何在提交ANGULAR 2中重置表单验证

来自分类Dev

带有提交和重置按钮的AngularJS表单验证

来自分类Dev

带有提交和重置按钮的AngularJS表单验证

来自分类Dev

在单击事件上重置 Angular Formly 表单验证

来自分类Dev

在确认框中单击“确定”后,如何重置表单?

来自分类Dev

重置表单值后无法设置文本框值

来自分类Dev

在Phoenix LiveView中提交后重置表单输入字段

来自分类Dev

表单加载后如何重置jquery等待游标?

来自分类Dev

成功提交表单后,AngularJS reCaptcha不会重置

来自分类Dev

操作完成后 Ngrx 重置表单输入

来自分类Dev

-Submit 和suppress-messages 后重置表单

Related 相关文章

热门标签

归档