在 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