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

Question

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

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|null"。类型"undefined"不可分配给类型"ValidationErrors|null"。

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

Answer 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 }。然后将验证器与您的输入关联起来(读取它(，并直接在模板中显示或隐藏错误消息。

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