Angular 15 Doctor Appointment Booking Form Template with Validations Working Demo

Hello to all, welcome to therichpost.com. In this post, I will tell you, Angular 15 Doctor Appointment Booking Form Template with Validations Working Demo.

Guys with this we will cover below things:

1. Angular 15 Reactive Form Implelemtnation.
2. Reactive forms validation email with valid format.
3. Reactive form checkbox validation.
4. Angular15 Reactive Form Responsiveness with Bootstrap 5.

Angular15 came and if you are new then you must check below link:

1. Angular 15 Tutorials

Here is the code snippet and please use carefully:

1. Very first guys, here are common basics steps to add angular 15 application on your machine and also we must have latest nodejs version(14.17.0) installed for angular 15:

npm install -g @angular/cli

ng new angularform // Set Angular 15 Application on your pc

cd angularform // Go inside project folder

2. Now run below commands to set bootstrap 5 modules into our angular 15 application for responsiveness (optional):

npm install bootstrap

npm i @popperjs/core

3. Now friends we just need to add below code into angularform/angular.json file (optional):

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

4. Now guys we will add below code into our angularform/src/app/app.module.ts file:

...
import { ReactiveFormsModule } from '@angular/forms';

@NgModule({
...
  imports: [
   ...
    ReactiveFormsModule,
   
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

5. Now guys we will add below code into our angularform/src/app/app.component.ts file:

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  //Form variables
registerForm:any = FormGroup;
submitted = false;
constructor( private formBuilder: FormBuilder){}
//Add user form actions
get f() { return this.registerForm.controls; }
onSubmit() {
  
  this.submitted = true;
  // stop here if form is invalid
  if (this.registerForm.invalid) {
      return;
  }
  //True if all the fields are filled
  if(this.submitted)
  {
    alert("Great!!");
  }
 
}
  ngOnInit() {
    //Add form validations
     this.registerForm = this.formBuilder.group({
       fname: ['', [Validators.required]],
      lname: ['', [Validators.required]],
      email: ['', [Validators.required]],
      phone: ['', [Validators.required]],
      date: ['', [Validators.required]],
      message: ['', [Validators.required]],
      
      });
  }
}

6. Finally we will add below code into our angularform/src/app/app.component.html file:

<div class="banner3">
  <div class="py-5 banner" style="background-image:url(https://therichpost.com/wp-content/uploads/2023/01/banner-bg-book.jpg);">
    <div class="container">
        <form [formGroup]="registerForm" (ngSubmit)="onSubmit()">
        <div class="row">
            <div class="col-md-7 col-lg-5">
            <h3 class="my-3 text-white font-weight-medium text-uppercase">Book Appointment</h3>
            <div class="bg-white">
                <div class="form-row border-bottom">
                <div class="p-4 left border-right w-50">
                    <label class="text-inverse font-12 text-uppercase">First Name<span class="text-danger">*</span></label>
                    <input type="text" class="border-0 p-0 font-14 form-control" placeholder="Your First Name" formControlName="fname"  [ngClass]="{ 'is-invalid': submitted && f.fname.errors }" />
                    <div *ngIf="submitted && f.fname.errors" class="invalid-feedback mb">
                        <div *ngIf="f.fname.errors.required">First name is required.</div>
                     </div>
                </div>
                <div class="p-4 right w-50">
                    <label class="text-inverse font-12 text-uppercase">Last Name<span class="text-danger">*</span></label>
                    <input type="text" class="border-0 p-0 font-14 form-control" placeholder="Your Last Name" formControlName="lname"  [ngClass]="{ 'is-invalid': submitted && f.fname.errors }"  />
                    <div *ngIf="submitted && f.lname.errors" class="invalid-feedback mb">
                        <div *ngIf="f.lname.errors.required">Last name is required.</div>
                     </div>
                </div>
                </div>
                <div class="form-row border-bottom p-4">
                <label class="text-inverse font-12 text-uppercase">Email Address<span class="text-danger">*</span></label>
                <input type="text" class="border-0 p-0 font-14 form-control" placeholder="Enter your Email Address" formControlName="email"  [ngClass]="{ 'is-invalid': submitted && f.email.errors }" />
                <div *ngIf="submitted && f.email.errors" class="invalid-feedback mb">
                    <div *ngIf="f.email.errors.required">Email is required.</div>
                 </div>
                </div>
                <div class="form-row border-bottom p-4">
                <label class="text-inverse font-12 text-uppercase">Phone Number<span class="text-danger">*</span></label>
                <input type="text" class="border-0 p-0 font-14 form-control" placeholder="Enter your Phone Number" formControlName="phone"  [ngClass]="{ 'is-invalid': submitted && f.phone.errors }" />
                <div *ngIf="submitted && f.phone.errors" class="invalid-feedback mb">
                    <div *ngIf="f.phone.errors.required">Phone is required.</div>
                 </div>
                </div>
                <div class="form-row border-bottom p-4 position-relative">
                <label class="text-inverse font-12 text-uppercase">Booking Date<span class="text-danger">*</span></label>
                <div class="input-group date">
                    <input type="date" class="border-0 p-0 font-14 form-control" id="dp" placeholder="Select the Appointment Date" formControlName="date"  [ngClass]="{ 'is-invalid': submitted && f.date.errors }" />
                    <div *ngIf="submitted && f.date.errors" class="invalid-feedback mb">
                        <div *ngIf="f.date.errors.required">Date is required.</div>
                     </div>
                </div>
                </div>
                <div class="form-row border-bottom p-4">
                <label class="text-inverse font-12 text-uppercase">Message<span class="text-danger">*</span></label>
                <textarea col="1" row="1" class="border-0 p-0 font-weight-light font-14 form-control" placeholder="Write Down the Message" formControlName="message"  [ngClass]="{ 'is-invalid': submitted && f.message.errors }"></textarea>
                <div *ngIf="submitted && f.message.errors" class="invalid-feedback mb">
                    <div *ngIf="f.message.errors.required">Message is required.</div>
                 </div>
                </div>
                <div>
                <button type="submit" class="w-100 m-0 border-0 py-4 font-14 font-weight-medium btn btn-danger-gradiant btn-block position-relative rounded-0 text-center text-white text-uppercase">
                                        <span>Book Your Appointment Now</span>
                                </button>
                </div>
            </div>
            </div>
        </div>
        </form>
    </div>
  </div>
</div>

7. Now we will add below custom style into our angularform/src/app/app.component.css file:

@import url(//fonts.googleapis.com/css?family=Montserrat:400,500,700);
.banner3 {
  font-family: "Montserrat", sans-serif;
  color: #8d97ad;
  font-weight: 300;
  max-height: 800px;
}

.banner3 .banner {
  position: relative;
  max-height: 700px;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center top;
  width: 100%;
  display: table;
}

.banner3 h1,
.banner3 h2,
.banner3 h3,
.banner3 h4,
.banner3 h5,
.banner3 h6 {
  color: #3e4555;
}

.banner3 .font-weight-medium {
  font-weight: 500;
}

.banner3 .subtitle {
  color: #8d97ad;
  line-height: 24px;
}

.banner3 .btn-danger-gradiant {
  background: #ff4d7e;
  background: -webkit-linear-gradient(legacy-direction(to right), #ff4d7e 0%, #ff6a5b 100%);
  background: -webkit-gradient(linear, left top, right top, from(#ff4d7e), to(#ff6a5b));
  background: -webkit-linear-gradient(left, #ff4d7e 0%, #ff6a5b 100%);
  background: -o-linear-gradient(left, #ff4d7e 0%, #ff6a5b 100%);
  background: linear-gradient(to right, #ff4d7e 0%, #ff6a5b 100%);
  border: 0px;
}

.banner3 .btn-danger-gradiant:hover {
  background: #ff6a5b;
  background: -webkit-linear-gradient(legacy-direction(to right), #ff6a5b 0%, #ff4d7e 100%);
  background: -webkit-gradient(linear, left top, right top, from(#ff6a5b), to(#ff4d7e));
  background: -webkit-linear-gradient(left, #ff6a5b 0%, #ff4d7e 100%);
  background: -o-linear-gradient(left, #ff6a5b 0%, #ff4d7e 100%);
  background: linear-gradient(to right, #ff6a5b 0%, #ff4d7e 100%);
}

.banner3 .btn-danger-gradiant.active,
.banner3 .btn-danger-gradiant:active,
.banner3 .btn-danger-gradiant:focus {
  -webkit-box-shadow: 0px;
  box-shadow: 0px;
  opacity: 1;
}


.banner3 .btn-md {
  padding: 15px 45px;
  font-size: 16px;
}

.banner3 .form-row {
  margin: 0;
}

.banner3 label.font-12 {
  font-size: 12px;
  font-weight: 500;
  margin-bottom: 5px;
}

.banner3 .form-control {
  color: #8d97ad;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
}

.banner3 .date label {
  cursor: pointer;
  margin: 0;
}

@media (max-width: 370px) {
  .banner3 .left,
  .banner3 .right {
    padding: 25px;
  }
}

@media (max-width: 320px) {
  .banner3 .left,
  .banner3 .right {
    padding: 25px 15px;
  }
}

.banner3 .font-14 {
  font-size: 14px;
}

.banner3 .text-inverse {
  color: #3e4555 !important;
}
.form-row {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-right: -5px;
    margin-left: -5px;
}
.border-bottom {
    border-bottom: 1px solid #dee2e6!important;
}
.border-right {
    border-right: 1px solid #dee2e6!important;
}

Now we are done friends and please run ng serve command to check the output in browser(locahost:4200) and if you have any kind of query then please do comment below.

Note: Friends, I just tell the basic setup and things, you can change the code according to your requirements. For better understanding please watch video above.

Guys I will appreciate that if you will tell your views for this post. Nothing matters if your views will be good or bad.

Jassa

Thanks