7.a Template Driven Forms

 AIM: Create a course registration form as a template-driven form.


Template-Driven Forms are a way to manage forms using Angular's two-way data binding and directive approach. Here's how you can create a basic course registration form:


Create a New Angular Project:


ng new course-registration-form cd course-registration-form

  1. Create the Registration Form:

create a new component for the registration form:

ng generate component registration-form

  1. Modify the HTML Template:

Open the registration-form.component.html file in the src/app/registration-form folder and modify it as follows:


<div class="registration-form"> <h2>Course Registration</h2> <form #registrationForm="ngForm" (ngSubmit)="onSubmit(registrationForm.value)">

<div class="form-group"> <label for="name">Full Name:</label> <input type="text" id="name" name="name" ngModel class="form-control" required> </div> <div class="form-group"> <label for="email">Email:</label> <input type="email" id="email" name="email" ngModel class="form-control" required> </div> <div class="form-group"> <label for="course">Course:</label> <select id="course" name="course" ngModel class="form-control" required> <option value="" disabled>Select a course</option> <option value="angular">Angular</option> <option value="react">React</option> <option value="vue">Vue.js</option> </select> </div> <button type="submit" [disabled]="!registrationForm.valid" class="btn btn-primary">Register</button> </form> </div>

  1. Add Component Logic:

Open the registration-form.component.ts file in the src/app/registration-form folder and modify it as follows:

import { Component } from '@angular/core'; @Component({ selector: 'app-registration-form', templateUrl: './registration-form.component.html', styleUrls: ['./registration-form.component.css'] }) export class RegistrationFormComponent { onSubmit(formData: any) { // Implement your submission logic here console.log('Form submitted');

 console.log('Form submitted:', formData);

} }

  1. Add Styles:

You can add some basic styles to the form by modifying the registration-form.component.css file:


.registration-form { max-width: 400px; margin: 0 auto; padding: 20px; border: 1px solid #ccc; border-radius: 5px; } .form-group { margin-bottom: 15px; } .form-control { width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 5px; } .btn { background-color: #007bff; color: white; padding: 10px 20px; border: none; border-radius: 5px; cursor: pointer; } .btn-primary { background-color: #007bff; } .btn:disabled { background-color: #ccc; cursor: not-allowed; }

  1. Use the Form Component:

In your app.component.html, you can now use the registration form component by adding the following code:


<app-registration-form></app-registration-form>

Run the Application:

Now, when the form is submitted, the onSubmit() function will receive an object containing the form values. You can log this data to the console to see the submitted form values.

Remember that in a real-world scenario, you would likely want to connect the form submission to a backend service to store the data or perform further actions. But for the purpose of demonstrating the form submission logic, logging the data to the console should suffice.

As a result, when you fill out the form and click the "Register" button, the form data will be displayed in the browser's console


7.b. Model Driven Forms or Reactive Forms

Create an employee registration form as a reactive form.

Reactive Forms are a more flexible and robust way to handle forms with complex validation and dynamic behavior.


ng new employee-registration-form cd employee-registration-form



Create the Registration Form Component

ng generate component employee-registration-form

  1. Modify the HTML Template:

Open the employee-registration-form.component.html file in the src/app/employee-registration-form folder and modify it as follows:


<div class="registration-form"> <h2>Employee Registration</h2> <form [formGroup]="registrationForm" (ngSubmit)="onSubmit()"> <div class="form-group"> <label for="name">Full Name:</label> <input type="text" id="name" formControlName="name" class="form-control"> </div> <div class="form-group"> <label for="email">Email:</label> <input type="email" id="email" formControlName="email" class="form-control"> </div> <div class="form-group"> <label for="department">Department:</label> <input type="text" id="department" formControlName="department" class="form-control"> </div> <button type="submit" [disabled]="registrationForm.invalid" class="btn btn-primary">Register</button> </form> </div>

  1. Add Component Logic:

Open the employee-registration-form.component.ts file in the src/app/employee-registration-form folder and modify it as follows:

import { Component, OnInit } from '@angular/core'; import { FormBuilder, FormGroup, Validators } from '@angular/forms'; @Component({ selector: 'app-employee-registration-form', templateUrl: './employee-registration-form.component.html', styleUrls: ['./employee-registration-form.component.css'] }) export class EmployeeRegistrationFormComponent implements OnInit { registrationForm: FormGroup; constructor(private fb: FormBuilder) { this.registrationForm = this.fb.group({ name: ['', Validators.required], email: ['', [Validators.required, Validators.email]], department: ['', Validators.required] }); }

ngOnInit() { this.registrationForm = this.fb.group({ name: ['', Validators.required], email: ['', [Validators.required, Validators.email]], department: ['', Validators.required] }); } onSubmit() { if (this.registrationForm.valid) { console.log('Form submitted:', this.registrationForm.value); } } }

  1. Add Styles:

You can add some basic styles to the form by modifying the employee-registration-form.component.css file:

.registration-form { max-width: 400px; margin: 0 auto; padding: 20px; border: 1px solid #ccc; border-radius: 5px; } .form-group { margin-bottom: 15px; } .form-control { width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 5px; } .btn { background-color: #007bff; color: white; padding: 10px 20px; border: none; border-radius: 5px; cursor: pointer; } .btn-primary { background-color: #007bff; } .btn:disabled { background-color: #ccc; cursor: not-allowed; }



  1. Use the Form Component:

In your app.component.html, you can now use the employee registration form component by adding the following code:


<app-employee-registration-form></app-employee-registration-form>

Open your app.module.ts and make sure you've imported and added the ReactiveFormsModule to the imports array:

import { ReactiveFormsModule } from '@angular/forms'; // Import ReactiveFormsModule in Import add ,ReactiveFormsModule

Run the Application:

Output:



Comments

Popular posts from this blog

9. Angular and MongoDBs

1. a. Angular Application Setup

2. Structural Directives - ngIf