Angular Validation 表单中只允许空格答案

【问题标题】：Not allowing ONLY spaces in a form Angular ValidatiomAngular Validation 表单中只允许空格
【发布时间】：2018-10-08 15:40:48
【问题描述】：

嘿，我目前正在处理的一个项目中遇到了一个小问题。我做了一些自定义验证，但我不知道如何将 NOT ONLY SPACES 验证结合到我的表单中。我需要将它与我的其他验证区分开来，这意味着它有自己的错误消息。

这是我目前的代码：

组件：

this.movieForm = this.fb.group({
  title: ['', [Validators.required,MyValidators.addMovieTitleValidator(this.dataService),MyValidators.spaceTitleValidator(this.dataService)]]

自定义验证器：

 static addMovieTitleValidator(dataService: DataService): ValidatorFn {
        return (control: AbstractControl) => {
            if (control.value && dataService.getTitles().includes(control.value.trim())) {
                return {
                    isError: true
                };
            }
            return null;
        }
}

static spaceTitleValidator(dataService: DataService): ValidatorFn {
        return (control: AbstractControl) => {
            if (control.value.trim().length<3) {
                return {
                    isError: true
                };
            }
            return null;
        }
    }

html:

 <mat-error *ngIf="!movieForm.get('title').hasError('required') && movieForm.get('title').touched && !movieForm.controls['title'].valid">
          A movie with this title already exists / Must provide at least 3 letters
        </mat-error>

现在，如果您只输入空格或使用存在的标题，您会收到此错误：

我怎样才能让它工作，以便在需要时看到每个消息而不是一起看到？我的意思是如果只有空格那么“空格错误”如果它存在那么“存在”等等。我需要在 html 中添加另一个代码，但我真的不知道如何分别引用每个验证器，因为在 html 中捕获错误的行是：

!movieForm.controls['title'].valid"

如何将这条线分成 2 个验证选项？一个用于我的自定义空间？

衷心感谢！

【问题讨论】：

嗨，提供的答案有帮助吗？如果确实如此，请确保将其标记为已接受。谢谢。

标签： html angular validation

【解决方案1】：

将验证器更改为如下内容：

static addMovieTitleValidator(dataService: DataService): ValidatorFn {
    return (control: AbstractControl) => {
        if (control.value && dataService.getTitles().includes(control.value.trim())) {
            return { 'addMovieTitleValidator': true };
        }
        return null;
    }
}

static spaceTitleValidator(dataService: DataService): ValidatorFn {
    return (control: AbstractControl) => {
        if (control.value.trim().length<3) {
            return {'spaceTitleValidator': true};
        }
        return null;
    }
}

并像这样在 html 中使用：

<mat-error *ngIf="movieForm.get('title').hasError('required') && movieForm.get('title').touched && !movieForm.controls['title'].valid">
  Title is required
</mat-error>
<mat-error *ngIf="movieForm.get('title').hasError('addMovieTitleValidator') && movieForm.get('title').touched && !movieForm.controls['title'].valid">
  A movie with this title already exists
</mat-error>
<mat-error *ngIf="movieForm.get('title').hasError('spaceTitleValidator') && movieForm.get('title').touched && !movieForm.controls['title'].valid">
  Must provide at least 3 letters
</mat-error>

Here 是一个简单的例子，展示了它是如何工作的......

【讨论】：