使用Angular Forms時如何進行復雜驗證

在Angular中，可以使用自定義驗證器函數來執行復雜的驗證邏輯。這些驗證器函數可以添加到模板驅動表單或響應式表單中的表單控件中。

以下是一個示例，演示如何在響應式表單中使用自定義驗證器函數進行復雜驗證：

import { Component } from '@angular/core';
import { FormGroup, FormBuilder, Validators, AbstractControl, ValidationErrors } from '@angular/forms';

function customValidator(control: AbstractControl): ValidationErrors | null {
  const value = control.value;
  
  if (value && value.length < 5) {
    return { customError: 'Value must be at least 5 characters long' };
  }
  
  return null;
}

@Component({
  selector: 'app-my-form',
  templateUrl: 'my-form.component.html'
})
export class MyFormComponent {
  myForm: FormGroup;

  constructor(private fb: FormBuilder) {
    this.myForm = this.fb.group({
      myField: ['', [Validators.required, customValidator]]
    });
  }
}

在上面的示例中，我們定義了一個名為customValidator的自定義驗證器函數。在創建表單控件時，我們將此函數添加到myField表單控件的驗證器數組中。當表單控件的值發生變化時，customValidator函數將被調用，并返回自定義錯誤消息，如果值少于5個字符。

在模板中，您可以通過檢查表單控件的errors屬性來顯示自定義錯誤消息：

<div *ngIf="myForm.get('myField').hasError('customError')">
  Value must be at least 5 characters long
</div>

通過這種方式，您可以執行復雜的驗證邏輯，并在模板中顯示相應的錯誤消息。