How to validate white spaces empty spaces Angular 2

Question

I would like to avoid white spaces empty spaces in my angular 2 form  Is it possible  How can this be done

User · Answer

I think a simple and clean solution is to use pattern validation.

The following pattern will allow a string that starts with white spaces and will not allow a string containing only white spaces:

/^(\s+\S+\s*)*(?!\s).*$/

It can be set when adding the validators for the corresponding control of the form group:

const form = this.formBuilder.group({
            name: ['', [
                Validators.required,
                Validators.pattern(/^(\s+\S+\s*)*(?!\s).*$/)
            ]]
        });

User · Answer

export function noWhitespaceValidator control  FormControl           const isSpace    control value        match   s g          return isSpace     whitespace   true    null      to use   password        Validators required  noWhitespaceValidator     In template html   lt span  ngIf  newWpForm get  password   hasError  whitespace    gt      password cannot contain whitespace  lt  span gt

User · Answer

An alternative would be using the Angular pattern validator and matching on any non-whitespace character   const nonWhitespaceRegExp  RegExp   new RegExp    S     this formGroup   this fb group     name   null   Validators required  Validators pattern nonWhiteSpaceRegExp

User · Answer

Maybe this article can help you http   blog angular-university io introduction-to-angular-2-forms-template-driven-vs-model-driven   In this approach  you have to use FormControl then watch for value changes and then apply your mask to the value  An example should be       form  FormGroup        ngOnInit        this form valueChanges              map  value    gt                       Here you can manipulate your value                 value firstName   value firstName trim                    return value                              filter  value    gt  this form valid               subscribe  value    gt                   console log  Model Driven Form valid value  vm     JSON stringify value

User · Answer

If you are using Angular Reactive Forms you can create a file with a function - a validator  This will not allow only spaces to be entered   import   AbstractControl   from   angular forms   export function removeSpaces control  AbstractControl      if  control  amp  amp  control value  amp  amp   control value replace   s g      length        control setValue            return null      and then in your component typescript file use the validator like this for example   this formGroup   this fb group     name   null   Validators required  removeSpaces

User · Answer

Following directive could be used with Reactive-Forms to trim all form fields so standart Validators required work fine    Directive     selector    formControl    formControlName       export class TrimFormFieldsDirective      Input   type  string     constructor  Optional   private formControlDir  FormControlDirective                  Optional   private formControlName  FormControlName         HostListener  blur      HostListener  keydown enter     trimValue         const control   this formControlDir  control    this formControlName  control      if  typeof control value      string   amp  amp  this type      password           control setValue control value trim

User · Answer

To validate white space in starting in an input you can just call change event and do inline function for that   x000D   x000D   lt input type  text  class  form-control                                   placeholder  First Name without white space in starting              name  firstName               firstName  ngModel                ngModel    user FirstName               change    user FirstName   user FirstName trim                required  gt  x000D   x000D   x000D

User · Answer

To automatically remove all spaces from input field you need to create custom validator    removeSpaces c  FormControl      if  c  amp  amp  c value        let removedSpaces   c value split      join          c value     removedSpaces  amp  amp  c setValue removedSpaces         return null      It works with entered and pasted text

User · Answer

In your app component html   lt form  formGroup   signupForm  gt               lt input  type  text  name  name   formControl   signupForm controls  name                  placeholder  First Name                required               gt        lt small              ngIf  signupForm controls  name   hasError  pattern                class  form-error-msg               gt First Name without space lt  small gt        lt  form gt    In your app componen ts file  import   Validators  FormGroup  FormControl   from   angular forms   signupForm  FormGroup  ngOnInit    this signupForm   new FormGroup     name  new FormControl           Validators required      Validators pattern    a-zA-Z           Validators minLength 3

User · Answer

I had a requirement where in the Firstname and Lastname are user inputs which were required fields and user should not be able to hit space as the first character   Import AbstractControl from node modules   import   AbstractControl   from   angular forms     check if the first character is space  If yes then blank the value and return required  true  If no return null  export function spaceValidator control  AbstractControl    if  control  amp  amp  control value  amp  amp   control value replace   s g      length        control setValue          console log control value       return   required  true     else       return null        the above code will trigger an error if the first character is space and will not allow space to be the first character   And in form builder group declare   this paInfoForm   this formBuilder group           paFirstName        Validators required  spaceValidator            paLastName        Validators required  spaceValidator

User · Answer

Prevent user to enter space in textbox in Angular 6   lt input type  text   keydown space    event preventDefault     required   gt

User · Answer

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        const isWhitespace    control value        trim   length     0      const isValid    isWhitespace      return isValid   null      whitespace   true        and in the HTML    lt div  ngIf  yourForm hasError  whitespace    gt Please enter valid data lt  div gt

User · Answer

i have used form valueChanges function to prevent white spaces  every   time it will trim all the fields after that required validation will   work for blank string    Like here -  this anyForm valueChanges subscribe data   gt       for  var key in data            if  data key  trim                      this f key  setValue       emitEvent  false                                  Edited --   if you work with any number integer  in you form control in that case trim function will not work  directly use like    this anyForm valueChanges subscribe data   gt      for  var key in data            if  data key   amp  amp  data key  toString   trim                      this f key  setValue       emitEvent  false

User · Answer

If you are using reactive forms in Angular 2   you can remove leading and trailing spaces with the help of  blur  app html  lt input blur   quot trimLeadingAndTrailingSpaces myForm controls  firstName    quot  formControlName  quot firstName quot    gt   app ts public trimLeadingAndTrailingSpaces formControl  AbstractControl        if  formControl  amp  amp  formControl value  amp  amp  typeof formControl value      string             formControl setValue formControl value trim

User · Answer

After lots of trial i found  a-zA-Z  s   for Alphanumeric with white space  Example   New York  New Delhi

User · Answer

What I did was created a validator that did the samething as angular for minLength except I added the trim    import   Injectable   from   angular core   import   AbstractControl  ValidatorFn  Validators   from   angular forms      Injectable   export class ValidatorHelper          This is the guts of Angulars minLength  added a trim for the validation     static minLength minLength  number   ValidatorFn           return  control  AbstractControl      key  string   any     gt                if  ValidatorHelper isPresent Validators required control                      return null                             const v  string   control value   control value                   return v trim   length  lt  minLength                      minlength      requiredLength   minLength   actualLength   v trim   length                       null                        static isPresent obj  any   boolean           return obj     undefined  amp  amp  obj     null            I then in my app component ts overrode the minLength function provided by angular   import   Component  OnInit   from   angular core       import   ValidatorHelper   from  app common components validators validator-helper   import   Validators   from   angular forms     Component     selector   app-root     templateUrl     app component html     export class AppComponent implements OnInit       constructor          ngOnInit    void              Validators minLength   ValidatorHelper minLength          Now everywhere angular s minLength built in validator is used  it will use the minLength that you have created in the helper   Validators compose         Validators minLength 2

User · Answer

This is a slightly different answer to one below that worked for me    x000D   x000D  public static validate control  FormControl     whitespace  boolean     x000D      const valueNoWhiteSpace   control value trim    x000D      const isValid   valueNoWhiteSpace     control value  x000D      return isValid   null     whitespace  true    x000D    x000D   x000D   x000D

User · Answer

To avoid the form submition  just use required attr in the input fields    lt input type  text  required gt   Or  after submit   When the form is submited  you can use str trim   to remove white spaces form start and end of an string  I did a submit function to show you   submitFunction formData        if  formData foo              launch an alert to say the user the field cannot be empty         return false            else               formData foo   formData foo trim       removes white             do your logic here         return true

User · Answer

In hello component html   lt input  formControl   name    gt   lt div  ngIf  name hasError  trimError     gt     name errors trimError value     lt  div gt    In hello component ts  import   ValidatorFn  FormControl   from   angular forms    const trimValidator  ValidatorFn    text  FormControl    gt      if  text value startsWith             return          trimError     value   text has leading whitespace                 if  text value endsWith             return          trimError     value   text has trailing whitespace                 return null       export class AppComponent     control   new FormControl     trimValidator       Example Code

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

Examples related to angular

Examples related to validation

Examples related to typescript

Examples related to input