在 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