Angular 13 CLI输入框正则验证失效问题求助

问题描述 #

我正在使用Angular 13 CLI，为文本输入框配置了仅允许大小写英文字母的验证规则，但该输入框仍可接受非字母字符。

组件代码（TypeScript） #

export class ProfileComponent implements OnInit {

    public accountForm: any = null;
    
    constructor() {
        this.accountForm = new FormGroup({
            first_name: new FormControl("", [
                Validators.required,
                Validators.minLength(3),
                Validators.maxLength(10),
                Validators.pattern(/^[a-zA-Z]+$/)
            ])
        });
    }
    
    ngOnInit(): void {
        
    }
}

HTML代码 #

<form [formGroup] = "accountForm">
    <input type="text" formControlName="first_name" [value]="this.userData.first_name" />
    <span *ngIf="this.accountForm.controls.first_name.errors && this.accountForm.controls.first_name.dirty ">
        <ng-container *ngIf="this.accountForm.controls.first_name.errors.required; else second">
            This is required
        </ng-container>
        <ng-template #second>
            <ng-container *ngIf="this.accountForm.controls.first_name.errors.minlength; else third">
                min length error
            </ng-container>
        </ng-template>
        <ng-template #third>
            <ng-container *ngIf="this.accountForm.controls.first_name.errors.maxlength; else fourth">
                max length error
            </ng-container>
        </ng-template>
        <ng-template #fourth>
            <ng-container *ngIf="this.accountForm.controls.errors.pattern">
                Invalid format for first name
            </ng-container>
        </ng-template>
    </span>
    <button>Submit</button>
    
</form>

问题分析及修复方案 #

1. 初始值绑定错误 #

模板中使用[value]绑定初始值会绕过FormControl的内部更新逻辑，导致验证规则无法正确触发。正确的做法是在组件ngOnInit生命周期钩子中通过patchValue或setValue设置初始值。

2. Pattern错误判断路径错误 #

在第四个ng-template中，错误引用了this.accountForm.controls.errors.pattern，正确路径应为this.accountForm.controls.first_name.errors.pattern，缺少了具体控件名称first_name。

3. 可选增强：实时限制输入（避免用户输入非法字符） #

如果希望从源头阻止非字母字符输入，可以添加input事件监听，实时过滤输入内容。

修正后的代码 #

组件代码 #

import { FormGroup, FormControl, Validators, OnInit } from '@angular/forms';

export class ProfileComponent implements OnInit {
    public accountForm: FormGroup;
    
    constructor() {
        this.accountForm = new FormGroup({
            first_name: new FormControl("", [
                Validators.required,
                Validators.minLength(3),
                Validators.maxLength(10),
                Validators.pattern(/^[a-zA-Z]+$/)
            ])
        });
    }
    
    ngOnInit(): void {
        // 初始化设置用户数据，替换模板中的[value]绑定
        if (this.userData?.first_name) {
            this.accountForm.patchValue({
                first_name: this.userData.first_name
            });
        }
    }

    // 实时过滤非字母字符
    onInput(event: Event): void {
        const inputElement = event.target as HTMLInputElement;
        // 移除所有非字母字符
        const filteredValue = inputElement.value.replace(/[^a-zA-Z]/g, '');
        // 更新表单控件值
        this.accountForm.controls.first_name.setValue(filteredValue);
    }
}

HTML代码 #

<form [formGroup]="accountForm">
    <input 
        type="text" 
        formControlName="first_name" 
        (input)="onInput($event)"
    />
    <span *ngIf="accountForm.controls.first_name.errors && accountForm.controls.first_name.dirty">
        <ng-container *ngIf="accountForm.controls.first_name.errors.required; else second">
            此字段为必填项
        </ng-container>
        <ng-template #second>
            <ng-container *ngIf="accountForm.controls.first_name.errors.minlength; else third">
                最少需要输入3个字符
            </ng-container>
        </ng-template>
        <ng-template #third>
            <ng-container *ngIf="accountForm.controls.first_name.errors.maxlength; else fourth">
                最多允许输入10个字符
            </ng-container>
        </ng-template>
        <ng-template #fourth>
            <ng-container *ngIf="accountForm.controls.first_name.errors.pattern">
                名字格式无效，仅允许输入大小写英文字母
            </ng-container>
        </ng-template>
    </span>
    <button type="submit">提交</button>
</form>

内容的提问来源于stack exchange，提问作者Pankaj