Not allowing ONLY spaces in a form Angular Validatiom

Question

Hey I have a little issue in a project I'm currently working on. I got some custom validations I made, but I cant figure out how to combine the NOT ONLY SPACES validation to my form. I need to distinguish it from my other Validations, meaning that its got its own error message.

this is my code so far:

component:

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

custom validators:

 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>

right now if you enter only spaces or use title which exists you get this error:

How can I make it work so every messagr will be seen if needed and not together? I mean if only spaces then "spaces error" if it exists then "exists" and so on. I need to add another code in the html but I don't really know how to reference each validator separately since in the html the line that catch the error is:

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

how can I divide this line into 2 validation options? one for spaces on for my custom?

Thanks by heart!

Hi, did the provided answer help? If it did please make sure you mark it as accepted. Thank you. — miselking
– miselking, Commented Oct 14, 2018 at 18:21

miselking · Accepted Answer · 2018-10-08 16:43:02Z

Change validators to something like this:

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;
    }
}

and use in html like this:

<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 is simple example demonstrating how this works...

Collectives™ on Stack Overflow

Not allowing ONLY spaces in a form Angular Validatiom

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related