在 Angular 2 中重置表单

Muhammad Adil 2023年1月30日 2022年4月20日
  1. Angular 2 中的 resetForm() 方法
  2. 在 Angular 2 中使用 resetForm() 方法重置表单的步骤
在 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 avatar Muhammad Adil avatar

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

相关文章 - Angular Form