How to validate white spaces/empty spaces? [Angular 2]

by

You can create a custom validator to handle this.

new FormControl(field.fieldValue || '', [Validators.required, this.noWhitespaceValidator])

Add noWhitespaceValidator method to your component

public noWhitespaceValidator(control: FormControl) {
    return (control.value || '').trim().length? null : { 'whitespace': true };       
}

and in the HTML

<div *ngIf="yourForm.hasError('whitespace')">Please enter valid data</div>

More Related Contents:

  1. Angular2 – FormControl Validation on blur
  2. Get all validation errors from Angular 2 FormGroup
  3. How do I share data between components in Angular 2?
  4. Error when trying to inject a service into an angular component “EXCEPTION: Can’t resolve all parameters for component”, why?
  5. Read response headers from API response – Angular 5 + TypeScript
  6. How to dynamically add a directive?
  7. In Angular, What is ‘pathmatch: full’ and what effect does it have?
  8. Ionic 2 Form goes up when keyboard shows
  9. When to use square brackets [ ] in directives @Inputs and when not?
  10. Angular2 – Interaction between components using a service
  11. Reactive forms – disabled attribute
  12. How to implement sleep function in TypeScript?
  13. Testing error case with observables in services
  14. Multiple canActivate guards all run when first fails
  15. Build Angular2 HTML and TypeScript to a single file
  16. angular keyvalue pipe sort properties / iterate in order
  17. Angular subscribe elegant
  18. How to allow access outside localhost
  19. Angular – Make multiple HTTP calls sequentially
  20. @types/googlemaps/index.d.ts’ is not a module
  21. Pass parameter into route guard
  22. Angular 4+ using Google Analytics
  23. Typescript dependency injection public vs private
  24. Angular: selected on option of select doesn’t work as excepted while using along with ngModel
  25. Open/Close sidenav from another component
  26. Angular – How to fix ‘property does not exist on type’ error?
  27. Cannot read property ‘native-element’ of undefined
  28. Angular 2 disable sanitize
  29. Can I use Angular i18n to translate string literals in typescript code
  30. How to generate components in a specific folder with Angular CLI?

Leave a Comment