表單驗證在許多網頁中很常使用到,只要有需要輸入資料的地方,就會有表單,而 Angular 本身就帶有表單驗證的內建函式庫,這次就從比較好入手的範本表單驗證做個筆記。
在 app.module.ts 中匯入 FormsModule
。
import { FormsModule } from "@angular/forms";
@NgModule({
declarations: [AppComponent],
imports: [BrowserModule, AppRoutingModule, FormsModule],
providers: [],
bootstrap: [AppComponent],
})
export class AppModule {}
加入 ngModel 後會產生表單的實體,
<form>
<label
>帳號:
<input type="email" name="userEmail" id="" ngModel />
</label>
<br />
<label
>密碼:
<input type="password" name="userPassword" id="" ngModel />
</label>
</form>
並且會產生對應的 class 可以使用,省去還要另外去想 class 狀態的命名。
一定要加
name
,不然會跳錯。
依需求用ngModel
指定component
的model
。
在 form
標籤中加上範本參考變數,並給予自定義名稱,可以參考這篇,為了檢視輸入資料是否正確,加入 pre
標籤與一個管線元件 json
,來觀察 #form
這個範本變數中表單值的變化,這個語法僅於開發時使用,上線前都會移除。
<form #form="ngForm">
<label>帳號:
<input type="email" name="userEmail" id="" ngModel>
</label>
<br>
<label>密碼:
<input type="password" name="userPassword" id="" ngModel>
</label>
</form>
<pre>{{form.value | json}}</pre> //預覽資料狀況
完成後會看到下方畫面。
Angular 驗證會自己帶有預設的 class,這個方式幫助到團隊開發時,不必另外想新的 className,如這次範例可以看到在未更動表單前在開發人員工具的 class 狀態,如下圖:
若有更動則會改變 class 名稱。
可針對這些狀態設定想要的 CSS 樣式。
可在表單帶入預設值,透過雙向綁定,即可達到該設定,並可直接回饋在表單內。
<form #form="ngForm">
<label
>帳號:
<input type="email" name="userEmail" id="" [(ngModel)]="myEmail" ngModel />
</label>
<br />
<label
>密碼:
<input
type="password"
name="userPassword"
id=""
[(ngModel)]="myPassword"
ngModel
/>
</label>
</form>
並且在 app.module.ts 中把資料先預設好。
import { Component } from "@angular/core";
@Component({
selector: "app-root",
templateUrl: "./app.component.html",
styleUrls: ["./app.component.scss"],
})
export class AppComponent {
myEmail = "text@email.com";
myPassword = "12345678";
}
表單就會出現預設資料
在 HTML 本身有一個標籤是 required
驗證功能,Angular 也一樣有這個標籤功能,另外還有最小長度 minlength
, 最大長度 maxlength
, 信箱格式驗證 pattern
等標籤功能,只要將這些標籤與條件加入 template
即可。
並且也將要驗證的資訊加上 ngIf
的條件,呈現在該表單下方,將兩個表單內容分別使用 formGroup
獨立出來,表單本身也使用 formControl
的 className
做好歸類,未來在設定 CSS 時更方便。
使用範本參考變數將 ngModel
的功能賦予到帳號與密碼的欄位。
<form #form="ngForm">
<div class="formGroup">
<label
>帳號:
<input
type="email"
class="formControl"
name="userEmail"
id="email"
placeholder="請輸入帳號"
required
pattern="^[a-zA-Z0-9.!#$%&』*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:.[a-zA-Z0-9-]+)*$"
#iAccount="ngModel"
[(ngModel)]="myEmail"
/>
</label>
</div>
<div class="errors" *ngIf="iAccount.errors">
<p *ngIf="iAccount.errors.required">請輸入帳號</p>
<p *ngIf="iAccount.errors.pattern">信箱格式錯誤</p>
</div>
<br />
<div class="formGroup">
<label
>密碼:
<input
type="password"
class="formControl"
name="userPassword"
id="password"
placeholder="請輸入密碼"
minlength="6"
required
#iPassword="ngModel"
[(ngModel)]="myPassword"
/>
</label>
</div>
<div class="errors" *ngIf="iPassword.errors">
<p *ngIf="iPassword.errors.required">請輸入密碼</p>
<p *ngIf="iPassword.errors.minlength">密碼長度須超過 6 字元</p>
</div>
</form>
這樣就完成了表單驗證功能。
Demo: https://stackblitz.com/edit/angular-ivy-e71hxv?file=src/app/app.component.html