提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

[Angular] Create a custom validator for reactive forms in Angular

Angular for in create Custom forms reactive validator
2023-09-14 08:59:17 时间

Also check: directive for form validation

 

User input validation is a core part of creating proper HTML forms. Form validators not only help you to get better quality data but they also guide the user through your form. Angular comes with a series of built-in validators such as required or maxLength etc. But very soon you have to build your own custom validators to handle more complex scenarios. In this lesson you're going to learn how to create such custom validators for Angular's reactive forms.

 

Basic validator is just a function.

import { ValidatorFn, AbstractControl, ValidationErrors } from '@angular/forms';

export function nameValidator(name: string): ValidatorFn {
  return (control: AbstractControl): ValidationErrors | null => {
    const isValid = control.value === '' || control.value === name;

    if (isValid) {
      return null;
    } else {
      return {
        nameMatch: {
          allowedName: name
        }
      };
    }
  };
}

 

Then you can use it with the validation in Reactvie form:

   import { nameValidator } from './name.validator';
   
    this.form = this.fb.group({
      firstname: ['', [Validators.required, nameValidator('someone')]]
    });

 

相关文章