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?

Answer 1

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

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

Answer 2

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).*$/)             ]]         });