Angular 9 Formvalidation with Template Driven Form using Bootstrap

Setting Up Angular Project
Run the below command to generate a brand new Angular 9 project using Angular CLI.

ng new angular-template-driven-form

Head over to the Angular form project.

cd angular-template-driven-form
Install Bootstrap in Angular 9

Install Bootstrap UI framework via NPM using following command.

npm install bootstrap

Add the Bootstrap CSS path in styles array inside the angular.json file.

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

Now we have configured Angular and Bootstrap, run the command to open the app in the browser.

ng serve --open
Importing FormsModule

To get started with Form control and NgModel Angular Forms service, we require to import FormsModule in app.module.ts file.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { FormsModule } from '@angular/forms';
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Create Form with Bootstrap From Template
Create a simple form in Angular using Bootstrap form component, open the app.component.html file and replace existing code with the following code.

<form novalidate>
  <div class="form-group">
    <label>Name</label>
    <input type="text" class="form-control">
  </div>
  <div class="form-group">
    <label>Email</label>
    <input type="email" class="form-control">
  </div>
  <div class="form-group">
    <label>Password</label>
    <input type="password" class="form-control">
  </div>
  <div class="form-group">
    <label>Hobbies</label>
    <select class="form-control">
      <option value="">Select an option</option>
      <option *ngFor="let hoby of Hobbies" [value]="hoby">
        {{hoby}}
      </option>
    </select>
  </div>
  <div class="form-group">
    <button class="btn btn-danger btn-block">Submit</button>
  </div>
</form>

Also, add the following options array for select drop-down input field in the app.component.ts file.

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  Hobbies: string[] = [
    'Acrobatics',
    'Acting',
    'Animation',
    'Astronomy',
    'Baking'
  ];
}

Implement Template-driven Form in Angular
Now we will add the template-driven form using ngModel directive in Angular component. Add the following code in the app.component.html file to initialize the Angular 9 template-driven form.

<form #userForm="ngForm" (ngSubmit)="onSubmit(userForm)">
  <div class="form-group">
    <label>Name</label>
    <input type="text" name="name" class="form-control" [(ngModel)]="model.name" required>
  </div>
  <div class="form-group">
    <label>Email</label>
    <input type="email" class="form-control" name="email" [(ngModel)]="model.email" required>
  </div>
  <div class="form-group">
    <label>Password</label>
    <input type="password" class="form-control" name="password" [(ngModel)]="model.password" required>
  </div>
  <div class="form-group">
    <label>Hobbies</label>
    <select class="form-control" name="hobbies" [(ngModel)]="hobbies">
      <option value="">Select an option</option>
      <option *ngFor="let hoby of Hobbies" [value]="hoby">
        {{hoby}}
      </option>
    </select>
  </div>
  <div class="form-group">
    <button class="btn btn-danger btn-block">Submit</button>
  </div>
</form>