Error when adding custom validation for angular reactive form

Question

I've created a simple custom validation function.

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

export function firstLeterUpperCase():ValidatorFn{
    return (control:AbstractControl) =>{
        const value = <string>control.value;
        if(!value) return;
        if(value.length === 0) return;
        const firstLetter = value[0];
        if(firstLetter  !== firstLetter.toUpperCase())
        {
            return{
                  firstLeterUpperCase:{
                   message:"First letter must be uppercase."
               }
            }
        }
        return
    }
}

but I've got the following error. Not sure where I'm doing wrong.

Error: src/app/validators/firstLetterValidator.ts:4:5 - error TS2322: Type '(control: AbstractControl) => {} | undefined' is not assignableenter code here to type 'ValidatorFn'. Type '{} | undefined' is not assignable to type 'ValidationErrors | null'. Type 'undefined' is not assignable to type 'ValidationErrors | null'.

From the error message, ValidatorFn type must return ValidationErrors or null, but you have returned undefined (return; is same as return undefined;). Maybe it should be return null; instead. — yume_chan
– yume_chan, Commented Jul 21, 2021 at 3:27

Nedu · Accepted Answer · 2021-07-21 01:22:42Z

2

I guess you are using the newest version of Angular. You can try this code:

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


 export function firstLetterUppercase(): ValidatorFn {
        return (control: AbstractControl) : ValidationErrors | null => {
            const value  = <string>control.value;
            if(!value) return null;
            if(value.length === 0) return null;
    
            const firstLetter = value[0];
            if(firstLetter !== firstLetter.toUpperCase()){
                return {
                    firstLetterUppercase : {
                        message: 'The first letter must be uppercase'
                    }
                }
            }
            return null;
        }
    }

edited Jul 21, 2021 at 1:22

answered Jul 21, 2021 at 1:05

Nedu

214 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

yume_chan Over a year ago

Can you add some explanation about what's the problem in the OP's code and how your code fixes it?

Francesco Lisandro · Accepted Answer · 2021-04-09 02:35:24Z

1

Try with a simple function that does what you need:

export function firstLetterUppercase(): ValidatorFn {
  return (control: AbstractControl): {[key: string]: any} | null => {
    return /^[A-Z]/.test(control.value) ? null : { firstLetterUpperCase: true };
  };
}

Where we use the regex /^[A-Z]/ to test the control.value and see if it has the first letter uppercase. The function will return null if there are no errors otherwise it returns { firstLetterUpperCase: true }. Then associate the validator to your input (read it) and show or hide the error message directly in the template.

<div class="error-message" *ngIf="yourInputName.errors.firstLetterUpperCase">
 First letter must be uppercase.
</div>

answered Apr 9, 2021 at 2:35

Francesco Lisandro

7205 silver badges14 bronze badges

Collectives™ on Stack Overflow

Error when adding custom validation for angular reactive form

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related