迹忆客 专注技术分享

本篇文章将向你展示如何在 Angular 2 中重置表单。

ngForm 指令提供了一种创建和初始化表单并为其字段设置验证的方法。ngForm 的一个常见用途是将页面上所有表单控件的值重置为初始状态。

你需要在 HTML 代码中添加对 ngForm 指令的引用，然后访问其重置方法。

Angular 2 中的 resetForm() 方法

resetForm() 方法是一个内置的 Angular 2 方法，它清除表单值并将它们重置为初始状态。

resetForm() 方法可以通过传递一个布尔值作为参数来调用。如果布尔参数有效，表单的字段和值将被清除。

如果为 false，则仅删除属性设置为 false 的字段。

在 Angular 2 中使用 resetForm() 方法重置表单的步骤

以下是使用 resestForm() 方法在 Angular 2 中重置表单的步骤。

导入表单类型的语法：

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>