时间戳

首页 > 解决方案 > 模板驱动的表单重置

angular - 模板驱动的表单重置

问题描述

我在我的项目中使用模板驱动的表单，我想在表单提交后重置表单值。reset 和 resetForm 方法都不起作用这里是代码

组件.html

<form #form="ngForm" (ngSubmit)="close(form)">
  <input type="number" ngModel name ="RevenueSale" 
  [(ngModel)]="closingRegister.RevenueSale" class=" theme-input" 
  placeholder="0.00">

  <input type="number" ngModel name ="TaxCollected" 
  [(ngModel)]="closingRegister.TaxCollected" class=" theme-input" 
  placeholder="0.00">

  <div class="col-lg-12 text-center">
    <button (click) = "modal.close()" type="button" class="btn btn-outline- 
     secondary mr-4">CANCEL</button> 
    <button type="submit"class="btn theme-btn">CLOSE</button>
  </div>

</form>

组件.ts

import { Component, OnInit } from '@angular/core';

import { Register } from '@app/core/models/register/register';

import { NgForm } from '@angular/forms';
import { ToastrService } from 'ngx-toastr';
@Component({
templateUrl: './compoment.component.html', 
})
 export class myComponent implements OnInit, {
 closingRegister = <Register>{};
 constructor(private router: Router,
 private registerSerive: RegisterService,
 private toastr: ToastrService,
 )  {}

 ngOnInit(){

  }

 close(form: NgForm){

  //this.registerSerive.closeRegister(this.closingRegister).subscribe( 
    closedRegister => {
    this.toastr.success('Register closed');
    this.modalService.dismissAll();
    console.log(form.value);
    form.reset();  
   //}
   }  
}

标签： angulartypescript

解决方案

您正在重置错误的表格。尝试

ngForm.reset();

推荐阅读