使用 Angular 9 Reactive Forms 为一个输入使用多种模式的方法答案

【问题标题】：The way to use multiple patterns for one input with Angular 9 Reactive Forms使用 Angular 9 Reactive Forms 为一个输入使用多种模式的方法
【发布时间】：2020-05-14 11:38:45
【问题描述】：

我的应用是使用 Angular 9 开发的，我还需要一些额外的功能：

所以应用看起来像这样：

component.ts：

ngOnInit() {
    this.buildForm()
}

get f() {
    return this.form.controls
}

buildForm() {
    this.form = this.fb.group({
        input: [null, [Validators.pattern('^[a-z][a-z0-9_]+$')]]
    })
}

component.html

<div *ngIf="f.input.errors.pattern">error message</div>

问题：

有多个正则表达式条件：^[a-z][a-z0-9_]+$

有什么方法可以显示每种情况的错误消息吗？

例如：

Validators.pattern([{'firstLetter': '^[a-z]'}, {'symbols': '^[a-z][a-z0-9_]+$'}])

更新 #1

根据SO answer，我尝试将代码更改为此，但我无法使用 *ngIf: 处理错误：

component.ts

regexValidator(regex: RegExp, error: ValidationErrors): ValidatorFn {
    return (control: AbstractControl): {[key: string]: any} => {
        if (!control.value) {
            return null;
        }
        const valid = regex.test(control.value);
        return valid ? null : error;
    }
}

buildForm() {
    this.form = this.fb.group({
        login: [null, [
            this.regexValidator(new RegExp('^[a-z]+$'), {'firstLetter': ''}),
            this.regexValidator(new RegExp('^[a-z][a-z0-9_]+$'), {'symbols': ''})
        ]],
    })
}

component.html：

<div *ngIf="f.login.hasError('firstLetter')">error message</div>
<div *ngIf="f.login.hasError('symbols')">error message</div>

解决方案：

将空字符串改为真值的sting：

this.regexValidator(new RegExp('^[a-z]+$'), {'firstLetter': true})

【问题讨论】：

标签： angular angular-reactive-forms

【解决方案1】：

据此SO answer：

component.ts

regexValidator(regex: RegExp, error: ValidationErrors): ValidatorFn {
    return (control: AbstractControl): {[key: string]: any} => {
        if (!control.value) {
            return null;
        }
        const valid = regex.test(control.value);
        return valid ? null : error;
    }
}

buildForm() {
    this.form = this.fb.group({
        login: [null, [
            this.regexValidator(new RegExp('^[a-z]+$'), {'firstLetter': true}),
            this.regexValidator(new RegExp('^[a-z][a-z0-9_]+$'), {'symbols': true})
        ]],
    })
}

component.html：

<div *ngIf="f.login.hasError('firstLetter')">error message</div>
<div *ngIf="f.login.hasError('symbols')">error message</div>

【讨论】：