How To Restrict Space At First Position In Textbox In Angular Application

Introduction

In this article, we will learn how to restrict users from entering space at the first position in Textbox in Angular applications.

Prerequisites

• Basic Knowledge of Angular 2 or higher
• Visual Studio Code
• Node and NPM installed

Let's create an Angular project by using the following command.

ng new rdemo

Open this project in Visual Studio Code and install bootstrap by using following command.

npm install bootstrap --save  

Now open styles.css file and add Bootstrap file reference. To add reference in styles.css file add this line. 

@import '~bootstrap/dist/css/bootstrap.min.css'; 

Now create a new component using the following command,

ng g c home

Now open home.component.ts file and add the following code,

import {
    Component,
    OnInit,
    ViewChild
} from '@angular/core';
import {
    FormBuilder,
    FormGroup,
    NgForm,
    Validators
} from '@angular/forms';
import {
    getDefaultData
} from '../data';
@Component({
    selector: 'app-home',
    templateUrl: './home.component.html',
    styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
    public myForm: FormGroup;
    submitted = false;
    readonly NoWhitespaceRegExp: RegExp = new RegExp("\\S");
    constructor(private formBuilder: FormBuilder) {
        this.myForm = formBuilder.group({
            name: ['', [Validators.required, Validators.minLength(3), Validators.pattern(this.NoWhitespaceRegExp)]]
        })
    }
    ngOnInit(): void {}
    get m() {
        return this.myForm.controls;
    }
    onSubmit() {
        debugger;
        this.submitted = true;
        if (this.myForm.invalid) {
            return;
        }
    }
}

Now open home.component.html file and add the following code,

<div class="container" style="margin-top:10px;margin-bottom: 24px;">
  <div class="col-sm-12 btn btn-info"> How to Restrict Space at first Position in Textbox in Angular Application </div>
</div>
<form [formGroup]="myForm" (ngSubmit)="onSubmit()">
  <div class="col-sm-12 row">
    <div class="col-sm-3"></div>
    <div class="col-sm-6 form-group">
      <label>User Name</label>
      <input type="text" formControlName="name" class="form-control" [ngClass]="{ 'is-invalid': submitted && m.name.errors }" />
      <div *ngIf="submitted && m.name.errors" class="invalid-feedback">
        <div *ngIf="m.name.errors.required">User Name is required</div>
        <div *ngIf="m.name.errors.pattern"> Restricted Space at First Position in Textbox </div>
      </div>
    </div>
    <div class="col-sm-3"></div>
  </div>
  <div class="col-sm-12 row" style="margin-top: 20px;">
    <div class="col-sm-3"></div>
    <div class="col-sm-6">
      <button type="submit" class="btn btn-info">Submit</button>
    </div>
    <div class="col-sm-3"></div>
  </div>
</form>

Now open app.module.ts file and add the following code,

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { SpreadsheetAllModule } from '@syncfusion/ej2-angular-spreadsheet';
@NgModule({
  declarations: [
    AppComponent,
    HomeComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,FormsModule,
    ReactiveFormsModule,
    SpreadsheetAllModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Now open app.component.html file and add the following code,

<app-home></app-home>

Now, run the application using the 'npm start' command and check the result

Enter space and click on the submit button

Summary

In this article, we learned how to restrict users from entering space at first position in Textbox in Angular Application.