Angular表單驗證有哪些技巧

Angular表單驗證是一種強大的功能，可以幫助開發者確保用戶輸入的數據是準確和有效的。以下是一些常用的Angular表單驗證技巧：

1. 使用內置驗證器

Angular提供了許多內置驗證器，如required、minlength、maxlength、email等，可以快速地為表單控件添加基本的驗證邏輯。

import { FormControl } from '@angular/forms';

const usernameControl = new FormControl('', [
  Validators.required,
  Validators.minLength(3)
]);

2. 使用自定義驗證器

對于更復雜的驗證邏輯，可以創建自定義驗證器。自定義驗證器可以是同步的或異步的。

import { Directive, Input } from '@angular/core';
import { AbstractControl, NG_ASYNC_VALIDATORS, ValidationErrors, Validator } from '@angular/forms';

@Directive({
  selector: '[uniqueName]',
  providers: [
    {
      provide: NG_ASYNC_VALIDATORS,
      useExisting: UniqueNameValidatorDirective,
      multi: true
    }
  ]
})
export class UniqueNameValidatorDirective implements Validator {
  @Input('uniqueName') uniqueName: string;

  constructor() {}

  validate(control: AbstractControl): ValidationErrors | null {
    // 異步驗證邏輯
    return of(control.value).pipe(
      delay(400),
      map(value => this.uniqueName.includes(value) ? { repeated: true } : null)
    );
  }
}

3. 正則表達式驗證

使用正則表達式可以創建自定義的驗證規則，適用于驗證手機號、郵箱等格式。

const phoneRegex = /^1[3-9]\d{9}$/;
const phoneControl = new FormControl('', [
  Validators.required,
  Validators.pattern(phoneRegex)
]);

4. 動態驗證規則

可以根據表單的狀態動態地添加或移除驗證器。例如，根據用戶選擇的用戶類型來決定是否驗證工號或學號。

this.typeFormControl.valueChanges.subscribe((type) => {
  if (type === 0) {
    this.formGroup.removeControl('studentNo');
    this.formGroup.addControl('teacherNo', this.teacherNoFormControl);
  } else {
    this.formGroup.removeControl('teacherNo');
    this.formGroup.addControl('studentNo', this.studentNoFormControl);
  }
});

5. 顯示驗證錯誤信息

在模板中使用*ngIf指令來根據表單控件的狀態顯示錯誤信息。

<div *ngIf="usernameControl.invalid && (usernameControl.dirty || usernameControl.touched)">
  <small *ngIf="usernameControl.errors?.required">用戶名是必填項。</small>
  <small *ngIf="usernameControl.errors?.minlength">用戶名至少需要3個字符。</small>
</div>

6. 使用ngSubmit事件處理表單提交

在組件類中定義一個方法來處理表單提交事件，并在該方法中執行驗證。

onSubmit() {
  if (this.form.valid) {
    console.log('表單已提交');
  } else {
    console.log('表單無效');
  }
}

7. 樣式化驗證狀態

Angular會根據表單控件的狀態自動添加CSS類，如ng-valid、ng-invalid等，可以根據這些類名來設置不同的樣式。

input.ng-valid {
  border-color: #78FA89;
}

input.ng-invalid {
  border-color: #FA787E;
}

通過這些技巧，可以有效地實現Angular表單驗證，提升用戶體驗并確保數據的準確性。