angular 2中的多个自定义验证

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

在Angular 2中，可以通过创建一个自定义验证器函数来实现多个自定义验证。这个函数可以在组件类中定义，也可以在单独的验证器文件中定义。

下面是一个示例，展示了如何在Angular 2中实现多个自定义验证：

首先，创建一个自定义验证器函数，它接收一个控件作为参数，并返回一个对象。这个对象描述了验证结果。例如，我们可以创建一个验证器函数来验证输入是否为数字：

function numberValidator(control: FormControl): { [key: string]: any } | null {
  const value = control.value;
  if (isNaN(value)) {
    return { 'notANumber': true };
  }
  return null;
}

在组件类中，使用Validators.compose()方法将多个验证器组合在一起。例如，我们可以将上面的数字验证器和必填验证器组合在一起：

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

@Component({
  // ...
})
export class MyComponent {
  myForm: FormGroup;

  constructor(private formBuilder: FormBuilder) {
    this.myForm = this.formBuilder.group({
      numberField: ['', Validators.compose([Validators.required, numberValidator])]
    });
  }
}

在上面的示例中，Validators.compose()方法将Validators.required和numberValidator组合在一起，作为numberField表单控件的验证器。

在模板中，可以使用formControlName指令将验证器应用到表单控件上，并使用ngIf指令根据验证结果显示错误消息。例如：

<form [formGroup]="myForm">
  <input type="text" formControlName="numberField">
  <div *ngIf="myForm.controls.numberField.errors?.required">This field is required.</div>
  <div *ngIf="myForm.controls.numberField.errors?.notANumber">Please enter a valid number.</div>
</form>

在上面的示例中，formControlName指令将验证器应用到numberField表单控件上。使用ngIf指令根据验证结果显示相应的错误消息。

总结：在Angular 2中，可以通过创建自定义验证器函数，并使用Validators.compose()方法将多个验证器组合在一起来实现多个自定义验证。通过在模板中使用formControlName指令将验证器应用到表单控件上，并使用ngIf指令根据验证结果显示错误消息，可以实现表单的多个自定义验证。

腾讯云相关产品和产品介绍链接地址：