how can I prevent user from entering space in a password field in angular?

Question

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 do 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>
          </div>
        
        </div>
    </form>
        




import { Component } from '@angular/core';
    import { FormControl, FormGroup, Validators } from '@angular/forms';
    import { TextValidator } from '../validator.validation';
    
    @Component({
      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};
            }
            else{
                return null;
            }
        }
    }

Answer 1

You can use the pattern validator: https://angular.io/api/forms/Validators .

hello.component.ts

import { Component, Input } from "@angular/core";
import { FormControl, FormGroup, Validators } from "@angular/forms";

@Component({
  selector: "hello",
  template: `
    <form [formGroup]="form">
      <div class="form-group">
        <label for="exampleInputPassword1" class="form-label">Password</label>
        <input
          type="text"
          formControlName="password"
          class="form-control"
          id="exampleInputPassword1"
        />
        <div
          *ngIf="
            form.controls['password'].invalid &&
            (form.controls['password'].dirty ||
              form.controls['password'].touched)
          "
          class="alert alert-danger"
        >
          <div *ngIf="password?.errors?.pattern">No space permitted</div>
        </div>
      </div>
    </form>
  `,
  styles: [
    `
      h1 {
        font-family: Lato;
      }
    `
  ]
})
export class HelloComponent {
  form = new FormGroup({
    email: new FormControl("", [Validators.required]),
    password: new FormControl("", 
     [Validators.pattern(/^\S*$/)] // <-- pattern with the regular expression which detects spaces
    ) 
  });

  get email() {
    return this.form.get("email");
  }
  get password() {
    return this.form.get("password");
  }
}

Here the code on stackblitz: https://stackblitz.com/edit/angular-ivy-gylfmt?file=src/app/hello.component.ts

Answer 2

Simply add onkeypress="return event.charCode != 32" into your input field like

<input onkeypress="return event.charCode != 32">

32 is the ASCII code for space. So, you are allowing all characters except space.