Registration Form in Angular with validation.

In This Article, I have explained How to Create a Registration Form in Angular.

Let’s start codding.

Step1: Create a New Angular Application.

ng new demo

Step2: Now Add one component.

ng g c registration

Step3: Install Bootstrap in your application.

npm install bootstrap

Then, set the configuration for installing bootstrap

angular.json

"styles": [
              "node_modules/bootstrap/dist/css/bootstrap.min.css",
              "src/styles.css"
          ],

styles.css

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

Step4: import ReactiveFormsModule in app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { RegistrationComponent } from './registration/registration.component';
import { ReactiveFormsModule } from '@angular/forms';        // import reactiveformmodule

@NgModule({
  declarations: [
    AppComponent,
    RegistrationComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    ReactiveFormsModule     // reactiveformmodule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Step5: Write the below code in your registration.component.ts

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { Router } from '@angular/router';

@Component({
  selector: 'app-registration',
  templateUrl: './registration.component.html',
  styleUrls: ['./registration.component.css']
})
export class RegistrationComponent implements OnInit {

  submitted = false;
  employeeForm!:FormGroup;
  fDate:any;
  Country:Country[]=[];
  City:City[]=[];
  Hobbies = [
    { name: 'reading', value: 'Reading', selected: false },
    { name: 'writting', value: 'Writting', selected: false },
    { name: 'travelling', value: 'Travelling', selected: false },
  ];

  constructor(private fb:FormBuilder,private router:Router) { }

  ngOnInit(): void 
  {
      this.employeeForm = this.fb.group({
        Name:['',[Validators.required]],
        DOB:['',Validators.required],
        Gender:['',Validators.required],
        PhoneNo:['',Validators.compose([Validators.required,Validators.pattern('[0-9+]*'),Validators.minLength(10)])],
        Address:['',Validators.required],
        EmailId:['',Validators.compose([Validators.required,Validators.pattern('^\\w+([-+.]\\w+)*@\\w+([-.]\\w+)*\\.\\w+([-.]\\w+)*$')])],
        Designation:['',Validators.required],
        Hobbie:this.fb.array([]),
        Salary:['',Validators.compose([Validators.required,Validators.pattern('[0-9+]*')])],
        Country:['',Validators.required],
        City:['',Validators.required],
        Image:['',Validators.required],
        Password:['',Validators.compose([Validators.required,Validators.minLength(6)])]
      });
      this.getCountry();
  }

  getCountry(){
    this.Country.push({Id:1,name:"India"},{Id:2,name:"Australia"});
    console.log("counrty");
    console.log(this.Country);
  }

  get loadRegistration()
  {
     return this.employeeForm?.controls;
  }

  getCity(event:any)
  {
     this.City = [];
     var countryName = event.target.value;
     if(countryName == 'India')
     {
       this.City.push({cityId:1,name:"Surat"},{cityId:2,name:"Navsari"},{cityId:3,name:"Ahemdabad"});
     }else if(countryName == 'Australia')
     {
      this.City.push({cityId:1,name:"Sydney"},{cityId:2,name:"Gold Cost"},{cityId:3,name:"Darwin"});
     }
  }

  onSubmit()
  {
     this.submitted = true;
     if(this.employeeForm.valid) 
     {
      this.router.navigate(['DashBoard']);
     }
  }

}

interface Country
{
  Id:number;
  name:string;
}

interface City
{
  cityId:number;
  name:string;
}

Step6: Write the below code in your registration.component.html

<div class="container p-5 background-color">
    <form [formGroup]="employeeForm" (ngSubmit)="onSubmit()">
        <div class="row">
          <div class="col-12 text-center">
             <h2>Registration</h2>
          </div>
        </div>
        <div class="row form-group mt-2">
            <div class="col-2 text-right">
                <label>Name:</label>
            </div>
            <div class="col-9">
                <input type="text" id="Name" class="form-control" formControlName="Name">
                <span class="text-danger" *ngIf="(loadRegistration.Name.touched || submitted) && loadRegistration.Name.errors?.required">*</span>
            </div>
            <div class="col-1">
            </div>
        </div>

        <div class="row form-group mt-2">
            <div class="col-2 text-right">
                <label>DOB: </label>
            </div>
            <div class="col-9 ">
                <input type="date" class="form-control" formControlName="DOB" id="date">
                <span class="text-danger" *ngIf="(loadRegistration.DOB.touched || submitted) && loadRegistration.DOB.errors?.required">*</span>
            </div>
            <div class="col-1">
            </div>
        </div>

        <div class="row form-group mt-2">
            <div class="col-2 text-right">
                <label>Gender: </label>
            </div>
            <div class="col-9 ">
                <input type="radio" id="male" value="male" formControlName="Gender">
                <label class="margin-left">Male</label>
                <input class="margin-left" type="radio" id="female" value="female" formControlName="Gender">
                <label class="margin-left">Female</label>
            </div>
            <div class="col-1">
            </div>
        </div>

        <div class="row form-group mt-2">
            <div class="col-2 text-right">
                <label>PhoneNo: </label>
            </div>
            <div class="col-9 ">
                <input type="number" formControlName="PhoneNo" id="PhoneNo" class="form-control">
                <span class="text-danger" *ngIf="(loadRegistration.PhoneNo.touched || submitted) && loadRegistration.PhoneNo.errors?.required">*</span>
            </div>
            <div class="col-1">
            </div>
        </div>

        <div class="row form-group mt-2">
            <div class="col-2 text-right">
                <label>Address: </label>
            </div>
            <div class="col-9 ">
                <textarea class="form-control" formControlName="Address"></textarea>
                <span class="text-danger" *ngIf="(loadRegistration.Address.touched || submitted) && loadRegistration.Address.errors?.required">*</span>
            </div>
            <div class="col-1">
            </div>
        </div>

        <div class="row form-group mt-2">
            <div class="col-2 text-right">
                <label>EmailId: </label>
            </div>
            <div class="col-9 ">
                <input type="text" id="EmailId" class="form-control" formControlName="EmailId">
                <span class="text-danger" *ngIf="(loadRegistration.EmailId.touched || submitted) && loadRegistration.EmailId.errors?.required">*</span>
            </div>
            <div class="col-1">
            </div>
        </div>

        <div class="row form-group mt-2">
            <div class="col-2 text-right">
                <label>Designation: </label>
            </div>
            <div class="col-9 ">
                <input type="text" id="EmailId" class="form-control" formControlName="Designation">
                <span class="text-danger" *ngIf="(loadRegistration.Designation.touched || submitted) && loadRegistration.Designation.errors?.required">*</span>
            </div>
            <div class="col-1">
            </div>
        </div>

        <div class="row form-group mt-2">
            <div class="col-2 text-right">
                <label>Hobbies: </label>
            </div>
            <div class="col-9 ">
                <div *ngFor="let Hobbies of Hobbies; let i=index" class="mb-1">
                    <input type="checkbox" value="Hobbies.value" class="set-margin-right">{{Hobbies.name}} 
                </div>
            </div>
            <div class="col-1">
            </div>
        </div>

        <div class="row form-group mt-2">
            <div class="col-2 text-right">
                <label>Salary: </label>
            </div>
            <div class="col-9 ">
                <input type="number" class="form-control" formControlName="Salary">
                <span class="text-danger" *ngIf="(loadRegistration.Salary.touched || submitted) && loadRegistration.Salary.errors?.required">*</span>
            </div>
            <div class="col-1">
            </div>
        </div>

        <div class="row form-group mt-2">
            <div class="col-2 text-right">
                <label>Country: </label>
            </div>
            <div class="col-9 ">
                <select (change)='getCity($event)' class="form-control">
                    <option *ngFor="let Country of Country;" [ngValue]="Country.Id" >
                         {{Country.name}}
                    </option>
                </select>
            </div>
            <div class="col-1">
            </div>
        </div>

        <div class="row form-group mt-2">
            <div class="col-2 text-right">
                <label>City: </label>
            </div>
            <div class="col-9 " >
                <select class="form-control">
                    <option *ngFor="let City of City;" [ngValue]="City.cityId">
                         {{City.name}}
                    </option>
                </select>
            </div>
            <div class="col-1">
            </div>
        </div>

        <div class="row form-group mt-2">
            <div class="col-2 text-right">
                <label>Password: </label>
            </div>
            <div class="col-9 ">
                <input type="password" formControlName="Password" class="form-control">
                <span class="text-danger" *ngIf="(loadRegistration.Password.touched || submitted) && loadRegistration.Password.errors?.required">*</span>
            </div>
            <div class="col-1">
            </div>
        </div>

        <div class="row form-group mt-2">
            <div class="col-2 text-right">
                <label>Upload File: </label>
            </div>
            <div class="col-9 ">
                <input type="file" formControlName="Image" class="form-control">
                <span class="text-danger" *ngIf="(loadRegistration.Image.touched || submitted) && loadRegistration.Image.errors?.required">*</span>
            </div>
            <div class="col-1">
            </div>
        </div>

        <div class="row form-group mt-2">
            <div class="col-2">
            </div>
            <div class="col-9 text-right">
                <button type="submit" class="btn btn-primary">Save</button>
            </div>
            <div class="col-1"></div>
        </div>
    </form>
</div>

Step7: Now Run the Application and see the output