Prevent (Restrict) space in password field in Angular

on Mar 03, 2021 10:19 PM

I want to prevent any space entry in password field. I think my code is right but maybe something has been updated but I do not know what I have to do.

This is my code. first i put the login.component.html then login. component.ts then validator file.

<form [formGroup]="from">
    <div class="form-group">
        <label for="exampleInputPassword1" class="form-label">Password</label>
        <input type="text" formControlName="password"
          class="form-control" id="exampleInputPassword1">
        <div *ngIf="from.controls['password'].invalid && (from.controls['password'].dirty || from.controls['password'].touched)" class="alert alert-danger">
        <div *ngIf="password.errors.noSpaceAllowed">No space permitted</div>


    import { Component } from '@angular/core';
    import { FormControl, FormGroup, Validators } from '@angular/forms';
    import { TextValidator } from '../validator.validation';
      selector: 'login',
      templateUrl: './login.component.html',
      styleUrls: ['./login.component.css']
    export class LoginComponent{
      from = new FormGroup({
        email : new FormControl('',[Validators.required]),
        password : new FormControl('',[TextValidator.noSpaceAllowed]),
      get email(){
        return this.from.get('email');
      get password(){
        return this.from.get('password');
    import { AbstractControl, ValidationErrors } from "@angular/forms";
    export class TextValidator{
        static noSpaceAllowed(control:AbstractControl) : ValidationErrors | null{
            // != -1 means in contains space
            if((control.value as string).indexOf('') != -1){
                //fire validator
                return {noSpaceAllowed : true};
                return null;


Download FREE API for Word, Excel and PDF in ASP.Net: Download