Angular form to not allow field starting with space

Question

I'm trying to validate a name field with not allowing spaces in the beginning, also tried this ( Angular Form Input block (space) REGEX ), but that doesn't allow spaces at all.

I have something like this:

<mat-error *ngIf="createEditForm.controls['nameCtrl'].hasError('required')">
    Your Name
</mat-error>

Also tried this ( How to validate white spaces/empty spaces? [Angular 2] ), but that allows the field to start with the space, just doesn't allow a empty space with not chars.

Is there any reason why you wouldn't want to trim the string value instead of not allowing the user to enter space? — Alf Moh, Apr 27 '20 at 18:26
And you tried to remove the excess space onblur? onBlur(value) { this.el.value = value.trim(); } — Andran, Apr 27 '20 at 22:16

score 3 · Answer 1 · answered Apr 27 '20 at 18:37

You can create a custom validator :

export function whitespaceValidator(form: FormCntrol): ValidationErrors {
    return form.value.startsWith(" ") ? {whitespace: true} : null;
  }
}

Add it into your form declaration :

createEditForm: FormGroup = new FormGroup({
  nameCtrl: new FormControl('', whitespaceValidator)
})

And change your html to :

<mat-error *ngIf="createEditForm.controls['nameCtrl'].hasError('whitespace')">
    Your Name
</mat-error>

score 1 · Accepted Answer · answered Apr 27 '20 at 18:46

I've added a trim validator as @AlfMoh said.

import { Component } from '@angular/core';
import { ValidatorFn, FormControl } from '@angular/forms';

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  control = new FormControl('', trimValidator);
}

Worked like a charm

score 1 · Answer 3 · answered Mar 08 '21 at 11:22

1

Even more simple, to avoid white spaces at the beginning and at the end with a number of characters between 3 and 250 :

Validators.pattern("^\\S{1}.{1,248}\\S{1}$")

answered Mar 08 '21 at 11:22

Tank

11
1

score 0 · Answer 4 · answered Nov 10 '20 at 10:26

Space at start is not allowed we can implement this in couple of steps.

Step: 1 Generate custom validator service as

  ng generate service custom-validator

Step: 2 Filled the service with

 import { Injectable } from '@angular/core';
import { FormControl } from '@angular/forms';

@Injectable({
  providedIn: 'root'
})
export class CustomValidatorService {

  static notAllowedSpaceValidator(control: FormControl) {
    let userInput = control.value;
    if (userInput && userInput.length > 0) {
      if (userInput[0] === " ") {
        return {
          forbiddenSpace: {
            value: userInput,
          },
        };
      }
    } else {
      return null;
    }
  }
}

Step 3 we are almost done, Now we just need to use this validation as

businessesForm: FormGroup; // declaration

 this.businessesForm = fb.group({
      businessName: [
        "",
        [CustomValidatorService.notAllowedSpaceValidator],  // <--- to foucs
      ], 
    });

Angular form to not allow field starting with space

4 Answers4