Angular - 表單驗證

---

---

表單驗證是 Web 應用程式的重要組成部分。它用於驗證使用者輸入是否為正確的格式。

RequiredValidator

讓我們在 Angular 中執行簡單的必填欄位驗證。開啟命令提示符並轉到reactive-form-app。

cd /go/to/reactive-form-app

替換test.component.ts檔案中的以下程式碼。

import { Component, OnInit } from '@angular/core';

//import validator and FormBuilder
import { FormGroup, FormControl, Validators, FormBuilder } from '@angular/forms';

@Component({
   selector: 'app-test',
   templateUrl: './test.component.html',
   styleUrls: ['./test.component.css']
})

export class TestComponent implements OnInit {
   //Create FormGroup
   requiredForm: FormGroup;
   constructor(private fb: FormBuilder) {
      this.myForm();
   }

   //Create required field validator for name
   myForm() {
      this.requiredForm = this.fb.group({
      name: ['', Validators.required ]
      });
   }
   ngOnInit()
   {

   }
}

這裡，

我們使用表單構建器來處理所有驗證。建構函式用於建立一個帶有驗證規則的表單。

在test.component.html檔案內新增以下程式碼。

<div>
   <h2>
     Required Field validation
   </h2>
   <form [formGroup]="requiredForm" novalidate>
         <div class="form-group">
           <label class="center-block">Name:
             <input class="form-control" formControlName="name">
           </label>
         </div>
         <div *ngIf="requiredForm.controls['name'].invalid && requiredForm.controls['name'].touched" class="alert alert-danger">
             <div *ngIf="requiredForm.controls['name'].errors.required">
             Name is required.
           </div>
         </div>
   </form>
 <p>Form value: {{ requiredForm.value | json }}</p>
 <p>Form status: {{ requiredForm.status | json }}</p>
 </div>

這裡，

• requiredForm被稱為全域性表單組物件。它是父元素。表單控制元件是 requiredForm 的子元素。

• 條件語句用於檢查，如果使用者觸碰了輸入欄位但沒有輸入值，則顯示錯誤訊息。

最後，使用以下命令啟動您的應用程式（如果尚未啟動）：

ng serve

現在執行您的應用程式並將焦點放在文字框上。然後，它將顯示“Name is required”，如下所示：

如果在文字框中輸入文字，則會進行驗證並顯示以下輸出：

PatternValidator

PatternValidator用於驗證正則表示式模式。讓我們執行簡單的電子郵件驗證。

開啟命令提示符並轉到reactive-form-app。

cd /go/to/reactive-form-app

替換test.component.ts檔案中的以下程式碼：

import { Component, OnInit } from '@angular/core';

import { FormGroup, FormControl, Validators, FormBuilder } from 
'@angular/forms';

@Component({
   selector: 'app-test',
   templateUrl: './test.component.html',
   styleUrls: ['./test.component.css']
})

export class TestComponent implements OnInit {
   requiredForm: FormGroup;
   constructor(private fb: FormBuilder) {
      this.myForm();
   }

   myForm() {
      this.requiredForm = this.fb.group({
      email: ['', [Validators.required, 
         Validators.pattern("^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$")] ]
      });
   }

   ngOnInit()
   {

   }
}

這裡，

在Validator中添加了電子郵件模式驗證器。

更新test.component.html檔案中的以下程式碼：

<div>
   <h2>
   Pattern validation
   </h2>
   <form [formGroup]="requiredForm" novalidate>
   <div class="form-group">
      <label class="center-block">Email:
      <input class="form-control" formControlName="email">
      </label>
   </div>
   <div *ngIf="requiredForm.controls['email'].invalid && requiredForm.controls['email'].touched" class="alert alert-danger">
       <div *ngIf="requiredForm.controls['email'].errors.required">
      Email is required.
      </div>
   </div>
   </form>
   <p>Form value: {{ requiredForm.value | json }}</p>
   <p>Form status: {{ requiredForm.status | json }}</p>
</div>

這裡，我們建立了電子郵件控制元件並呼叫了電子郵件驗證器。

執行您的應用程式，您將看到以下結果：

類似地，您可以自己嘗試執行其他型別的驗證器。