Не допускается ТОЛЬКО пробелы в форме Angular Validatiom

Question

Эй, у меня есть небольшая проблема в проекте, над которым я сейчас работаю.Я получил некоторые пользовательские проверки, которые я сделал, но я не могу понять, как объединить проверку NOT ONLY SPACES с моей формой.Мне нужно отличить его от других моих проверок, что означает, что он получил свое собственное сообщение об ошибке.

На данный момент это мой код:

компонент:

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

customвалидаторы:

 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 варианта проверки? один для пробелов для моего обычая?

Спасибо наизусть!

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

Здесь простопример, демонстрирующий, как это работает ...