No Space Validator in Angular

Question

I'm hanlding more than 10 forms in my project with many input fields. The problem is my fields taking empty spaces as values. As for now what I did is getting the value of the field on change and trim it and check the length with 0. If yes throw 'don't use empty spaces' , else take the value.

<input (change)='check($event)'>

check(data){
   if(data.trim() === 0 ){
       console.log('contains empty spaces'   
   }else{
        console.log('contains data') 
   }
}

But as the field or form increases this will be a headache. So I'm trying to make this as common module. So that I'll use this as common like service.

note: the validation should happen on pretext (i.e) ' HelloWorld' should throw error but 'Hello World' should not. Can anyone give me some idea or suggestion to solve this issue..

Thanks in advance

what formbuilder approach are you following? if your are using reactiveForms approach you can pass validators to you form fields — Ricardo
– Ricardo, Commented Mar 26, 2018 at 17:42
If you want to prevent spaces all together: isSpace($event) { let charCode = ($event.which) ? $event.which : $event.keyCode; if (charCode === 32) return false; return true; } and then on input (keypress)="isSpace($event)" if you want to preserve spaces, I think maybe add a custom validator that checks spaces etc via regex. — Taranjit Kang
– Taranjit Kang, Commented Mar 26, 2018 at 18:40
Sounds like a good use case to create a custom validator. angular.io/guide/form-validation#custom-validators — Narm
– Narm, Commented Mar 26, 2018 at 20:14

Tomasz Kula · Accepted Answer · 2018-04-06 13:45:30Z

10

trim.validator.ts

export const trimValidator: ValidatorFn = (control: FormControl) => {
  if (control.value.startsWith(' ')) {
    return {
      'trimError': { value: 'control has leading whitespace' }
    };
  }
  if (control.value.endsWith(' ')) {
    return {
      'trimError': { value: 'control has trailing whitespace' }
    };
  }
  return null;
};

In any component that wants to use the trim.validator.ts

import { trimValidator } from 'path/to/trim.validator'.ts

ctrl: FormControl;

ngOnInit() {
  this.ctrl = new FormControl('', trimValidator);
)

If you are using template driven forms, you need to create a validation directive. Just follow the steps from the official documentation

Live demo

edited Apr 6, 2018 at 13:45

answered Mar 26, 2018 at 21:24

Tomasz Kula

16.9k3 gold badges71 silver badges82 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

VinoPravin Over a year ago

Thanks tomasz, but can u help me in having this in a seperate module. so that it'll be available as common for all components

Tomasz Kula Over a year ago

Its a regular function. You can put it in a file trim.validator.ts, export it, and then import it in any components that want to use it. Just like you do with build in validators. It does not need to be a part of any @NgModule.

Tomasz Kula Over a year ago

@TheLawliet94 Glad I could help :) Can you mark my answer as the solution?

Edgar Romero · Accepted Answer · 2018-03-26 18:13:15Z

1

You can try using includes like this

data.includes(" ")

It will return true if the string contains spaces.

answered Mar 26, 2018 at 18:13

Edgar Romero

263 bronze badges

Collectives™ on Stack Overflow

No Space Validator in Angular

2 Answers 2

3 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Related