在 Angular 2 中重置表单
本教程将向你展示如何在 Angular 2 中重置表单。
ngForm 指令提供了一种创建和初始化表单并为其字段设置验证的方法。ngForm 的一个常见用途是将页面上所有表单控件的值重置为初始状态。
你需要在 HTML 代码中添加对 ngForm 指令的引用，然后访问其重置方法。
Angular 2 中的 resetForm() 方法
resetForm() 方法是一个内置的 Angular 2 方法，它清除表单值并将它们重置为初始状态。
resetForm() 方法可以通过传递一个布尔值作为参数来调用。如果布尔参数有效，表单的字段和值将被清除。
如果为 false，则仅删除属性设置为 false 的字段。
在 Angular 2 中使用 resetForm() 方法重置表单的步骤
以下是使用 resestForm() 方法在 Angular 2 中重置表单的步骤。
-
在你选择的 IDE 中打开你的项目并创建一个新组件。
-
然后，创建一个包含一些输入的表单并添加验证。
-
将
resestForm()方法添加到组件的ngOnInit()生命周期钩子中。
导入表单类型的语法：
import { ResestFormModule } from '@angular/forms';
实例化表单类型的语法：
let myForm = new ResestForm();
将你的表单注册到你的组件中，以便在该组件及其子组件中使用。这将确保所有子组件都知道此表单并能够使用它。
当你想要重置表单时，在你的代码中调用此方法，例如当用户单击按钮或提交表单上的数据时。
示例（TypeScript）：
import { Component, VERSION } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
})
export class AppComponent {
myForm: FormGroup;
constructor(fb: FormBuilder) {
this.myForm = fb.group({
name: '2'
})
}
resetForm() {
this.myForm.reset();
}
}
示例（HTML）：
<form [formGroup]="myForm" novalidate>
<select formControlName="name">
<option disabled hidden value="null">Please select</option>
<option value="1">Pakistan</option>
<option value="2">USA</option>
<option value="3">Uk</option>
</select>
</form>
<button (click)="resetForm()">reset</button>
点击这里查看上面代码的演示。
Muhammad Adil is a seasoned programmer and writer who has experience in various fields. He has been programming for over 5 years and have always loved the thrill of solving complex problems. He has skilled in PHP, Python, C++, Java, JavaScript, Ruby on Rails, AngularJS, ReactJS, HTML5 and CSS3. He enjoys putting his experience and knowledge into words.
Facebook