在Angular 2中提交后如何清除表格？

在Angular 2中，它们是两种形式的形式：

• 模板驱动的表单。
• 反应形式。

在模板驱动的形式中，大多数内容将填充在.html文件中。
在反应形式中，大多数功能和内容将在.ts文件中执行。响应式表单的主要优点是，我们可以创建自定义验证，第二个关键优势是在执行单元测试时，由于HTML代码将是干净的，因此编写单元测试更加可行。以模板驱动的方式重置表单：

在模板驱动的方法中，我们需要从’@ angular / forms’导入NgForm，并使用[(ngModel)]指令进行两种方式的数据绑定，我们还应该从app.module中的’ @ angular / forms’ app.module.ts文件。在下面的行中，存在输入格式。除此之外，当我们提到ngModel指令时，我们需要在输入类型中添加name属性。

import { FormsModule } from '@angular/forms';

在反应形式中，我们需要从'@angular/forms'导入FormGroup。

在以相应的方法导入上述模块之后，角度形式模块提供了一种称为reset()的内置方法。我们可以使用该方法，并且可以重置表格。

示例： .html文件

// In .html file

    
Login Form
  Username :
  
    
  Password :
  
    
  Submit
  

示例： .ts文件

import {NgForm} from '@angular/forms'
import { Component, OnInit } from '@angular/core';
  
@Component({
  selector: "app-login",
  templateUrl: "./login.html",
  styleUrls: [],
})
  
  
export class Sample implements OnInit{
  
constructor(){}
  
ngOninit(){
}
  
username='';
password='';
  
completeLogin(login :NgForm){
 // In .ts file
  
login.reset() 
// call this inbuilt method to reset the form
  
}
  
}

在反应性表单中重置表单：

示例： .html文件

     // In.html file
  
Login Form
.
.  Username :
  
    
  Password :
  
    
  Submit

示例： .ts文件

import {FormGroup, FormControl} from '@angular/forms' 
import { Component, OnInit } from '@angular/core';
  
  
@Component({
  selector: "app-signin",
  templateUrl: "./signin.html",
  styleUrls: ["],
})
  
export class Sample implements OnInit{    
// In.ts file
  
login:FormGroup;
constructor(){}
  
ngOninit(){
  
login=newFormGroup({
username:new FormControl(''),
password:new FormControl(''),
})
  
}
  
completeLogin(){   
  
this.login.reset();  
// calling this method will reset the method
   
}
  
}

输出：

提交表单后，输出为：