Mandy's Web

文章導覽

  • 加上表單驗証

  • 自訂驗証器

  • 把錯誤訊息 show 出來!


Angular Reactive Forms 自訂表單驗証器

有表單 當然少不了驗証,這次的情境是

名字是必填欄位。 手機不一定會是必填,但填了後必須符合手機的格式,09 開頭 共 10 碼

來囉!!


加上表單驗証

在這個 form 表單的下方 新增一個驗証方式,動態驗証就寫在 validator 這裡面

export class FormComponent implements OnInit {
  form: FormGroup = new FormGroup(
    {
      name: new FormControl("", Validators.required),
      phone: new FormControl(""),
      favorites: new FormArray([]),
    },
    { validators: validator }
  );
}

自訂驗証器

.ts

export const validator: ValidatorFn = (
  control: AbstractControl
): ValidationErrors | null => {
  const { name, phone, favorites } = control.value;
  // 手機號碼正規化
  const regPhone = RegExp(/^09[0-9]{8}$/);
  return !phone ? null : regPhone.test(phone) ? null : { phone: true };
};

若是號碼填寫錯誤,把 form 的 console 叫出來 會是像圖上這樣

一開始我們有設定名字為必填,圖上紅色框起來就是沒填到名字所出現的訊息

若無誤則會是 null,這樣我們就可以在 tmeplate 上做顯示讓使用使知道表單哪裡有問題


把錯誤訊息 show 出來!

在 html 裡加上錯誤訊息

<form [formGroup]="form" (ngSubmit)="onSubmit()">
  <div>
    <label for="">name:</label>
    <input formControlName="name" type="text" />
    <!-- 錯誤訊息判斷 -->
    <p style="color:red" *ngIf="form.get('name')?.errors?.required">
      Name Required
    </p>
  </div>
  <div>
    <label for="">phone:</label>
    <input formControlName="phone" type="tel" />
  </div>
  ...略
  <!-- 錯誤訊息判斷 -->
  <p style="color:red" *ngIf="form.errors?.phone">Your phone Error</p>
  <button type="submit">Submit</button>
</form>

下圖為判斷 form 裡的驗証訊息,來決定要不要讓表單送出

參考文件:

把自訂驗證器新增到響應式表單中 https://angular.tw/api/forms/ValidatorFn


小記:本來是有點懶的打這篇的,但前幾天,同事對我說,之後我們的表單都要有動態驗証哦! 我…嗯,…好 XDDD 然後就把久遠的回憶翻回來,再次熟悉了一下,這篇因此而生


對這篇文章有什麼想法嗎?

Copyright © 2022 Mandy. All rights reserved. Build with Angular