Angular 表单自定义验证器

Question

我目前使用的是 Angular 8，但自定义验证器存在问题。唯一有效的验证器是 Validators.minLength(3)。 noEmptyStringValidator 不起作用，即使我可以将 'here' 打印到验证器函数中。你可以帮帮我吗？

上下文如下：

无空-string.validator.ts

import { AbstractControl } from '@angular/forms';

export function noEmptyStringValidator(control: AbstractControl): { [key: string]: any } | null {
    console.log('here');

    return control.value && control.value.trim().length > 0 ? { noEmptyString: { valid: true } } : null;
}

myComponent.component.ts

...
topicLabelControl = new FormControl();
...
this.topicLabelControl.setValidators([ Validators.minLength(3), noEmptyStringValidator ]);
...
console.log(this.topicLabelControl.valid);

myComponent.component.html

<mat-form-field appearance="outline"
      (keydown.enter)="handleEnterKey()">
      <input type="text"
        matInput
        [formControl]="topicLabelControl"
        [matAutocomplete]="auto" />
      <mat-autocomplete #auto="matAutocomplete">...
      </mat-autocomplete>
    </mat-form-field>

Answer 1

您的逻辑似乎是颠倒的：如果输入有效，则验证器应该 return null，如果无效，则验证器应该使用其键标识错误的对象。（该值可以是任何值，可用于报告任何附加信息）：

return control.value && control.value.trim().length > 0 ? null : { noEmptyString: true };

Angular 表单自定义验证器

Angular Form Custom Validators

angular

angular-forms

angular-validation