在angular表单中设置自定义输入验证

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

function postalCodeValidator(control: FormControl): { [key: string]: any } | null {
  const postalCodePattern = /^[0-9]{5}$/; // 邮政编码的正则表达式

  if (control.value && !postalCodePattern.test(control.value)) {
    return { 'invalidPostalCode': true }; // 返回一个包含错误标识的对象
  }

  return null; // 验证通过，返回null
}

export class MyComponent {
  myForm = new FormGroup({
    postalCode: new FormControl('', [Validators.required, postalCodeValidator])
  });
}

<form [formGroup]="myForm">
  <input type="text" formControlName="postalCode">
  <div *ngIf="myForm.get('postalCode').invalid && (myForm.get('postalCode').dirty || myForm.get('postalCode').touched)">
    <div *ngIf="myForm.get('postalCode').errors.required">邮政编码是必填项。</div>
    <div *ngIf="myForm.get('postalCode').errors.invalidPostalCode">请输入有效的邮政编码。</div>
  </div>
</form>