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

在Angular表单中设置自定义输入验证可以通过创建自定义验证器函数来实现。自定义验证器函数是一个函数，它接收一个控件作为参数，并返回一个对象，该对象描述了验证结果。

首先，我们需要在组件中导入Validators和FormControl类：

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])
  });
}

在上面的代码中，我们将Validators.required和postalCodeValidator作为验证器函数传递给FormControl的构造函数。Validators.required用于验证输入是否为空，而postalCodeValidator用于验证输入是否为有效的邮政编码。

最后，在模板中，我们可以使用formControlName指令将表单控件与输入字段关联起来，并显示验证错误消息：

<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>

在上面的代码中，我们使用myForm.get('postalCode')来获取postalCode控件，并检查其invalid属性和errors对象来确定是否显示错误消息。

这是一个简单的示例，展示了如何在Angular表单中设置自定义输入验证。根据具体需求，你可以创建更复杂的自定义验证器函数，并应用于不同的表单控件。对于更多关于Angular表单验证的信息，你可以参考Angular官方文档。