为角度反应形式添加自定义验证时出错答案

【问题标题】：Error when adding custom validation for angular reactive form为角度反应形式添加自定义验证时出错
【发布时间】：2021-04-08 21:48:35
【问题描述】：

我创建了一个简单的自定义验证函数。

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

但我遇到了以下错误。不知道我哪里做错了。

错误：src/app/validators/firstLetterValidator.ts:4:5 - 错误 TS2322: Type '(control: AbstractControl) => {} | undefined' 不可分配enter code here 键入'ValidatorFn'。输入'{} | undefined' 不可分配给类型 'ValidationErrors |空值'。类型“未定义”不可分配给类型“ValidationErrors |空'。

【问题讨论】：

从错误信息来看，ValidatorFn类型必须返回ValidationErrors或null，但是你已经返回undefined（return;与return undefined;相同）。也许应该改成return null;。

标签： angular forms validation

【解决方案1】：

我猜你正在使用最新版本的 Angular。你可以试试这段代码：

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

【讨论】：

您能否添加一些关于 OP 代码中的问题以及您的代码如何修复它的解释？

【解决方案2】：

尝试一个简单的函数来满足你的需要：

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

我们使用正则表达式/^[A-Z]/ 来测试control.value 并查看它的第一个字母是否大写。如果没有错误，该函数将返回null，否则返回{ firstLetterUpperCase: true }。然后associate the validator to your input（阅读）直接在模板中显示或隐藏错误信息。

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

【讨论】：