angular

Angular中怎么自定义验证器

小亿
101
2024-06-04 17:45:29
栏目: 编程语言

在Angular中自定义验证器可以通过创建一个函数,并将其应用到表单控件上来实现。下面是一个简单的例子:

首先,创建一个自定义验证器函数:

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

export function customValidator(control: AbstractControl): {[key: string]: any} | null {
  const valid = control.value === 'example';
  return valid ? null : { custom: true };
}

然后,在组件中将这个验证器函数应用到表单控件上:

import { Component } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { customValidator } from './custom-validator';

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

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

最后,在模板文件中显示验证错误信息:

<form [formGroup]="myForm">
  <input formControlName="myControl">
  <div *ngIf="myForm.controls.myControl.hasError('custom')">
    This field must be 'example'
  </div>
</form>

通过以上步骤,你就可以在Angular中自定义验证器并进行验证了。

0
看了该问题的人还看了