The Project | About Us | Contribute | Donations | License
HOME My courses Completed
◄ Previous
◄

Template-Driven Forms

Next ►
►

Template-driven forms in Angular are a simple and straightforward way to create forms using Angular's powerful form handling capabilities. This approach leverages Angular's directives and binding syntax to manage form data and validation directly in the template.

Key Concepts

  1. FormsModule: To use template-driven forms, you need to import the FormsModule from @angular/forms in your Angular module.
  2. ngModel Directive: This directive binds form controls to properties in the component class.
  3. Form Validation: Angular provides built-in validators and allows you to create custom validators.
  4. Form Submission: Handling form submission and processing form data.

Setting Up Template-Driven Forms

Step 1: Import FormsModule

First, you need to import the FormsModule in your Angular module.

// app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, FormsModule],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Step 2: Create a Form in the Template

Next, create a form in your component template using Angular's form directives.

<!-- app.component.html -->
<form #userForm="ngForm" (ngSubmit)="onSubmit(userForm)">
  <div>
    <label for="name">Name:</label>
    <input type="text" id="name" name="name" ngModel required>
  </div>
  <div>
    <label for="email">Email:</label>
    <input type="email" id="email" name="email" ngModel required email>
  </div>
  <button type="submit" [disabled]="userForm.invalid">Submit</button>
</form>

Step 3: Handle Form Data in the Component

In your component class, define the method to handle form submission.

// app.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  onSubmit(form: any): void {
    console.log('Form Data: ', form.value);
  }
}

Practical Example

Let's create a more detailed example with validation and error messages.

Template

<!-- app.component.html -->
<form #userForm="ngForm" (ngSubmit)="onSubmit(userForm)">
  <div>
    <label for="name">Name:</label>
    <input type="text" id="name" name="name" ngModel required>
    <div *ngIf="userForm.submitted && userForm.controls.name?.invalid">
      <small *ngIf="userForm.controls.name?.errors?.required">Name is required.</small>
    </div>
  </div>
  <div>
    <label for="email">Email:</label>
    <input type="email" id="email" name="email" ngModel required email>
    <div *ngIf="userForm.submitted && userForm.controls.email?.invalid">
      <small *ngIf="userForm.controls.email?.errors?.required">Email is required.</small>
      <small *ngIf="userForm.controls.email?.errors?.email">Invalid email format.</small>
    </div>
  </div>
  <button type="submit" [disabled]="userForm.invalid">Submit</button>
</form>

Component

// app.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  onSubmit(form: any): void {
    if (form.valid) {
      console.log('Form Data: ', form.value);
    } else {
      console.log('Form is invalid');
    }
  }
}

Exercises

Exercise 1: Create a Registration Form

Create a registration form with the following fields:

  • Username (required)
  • Password (required, minimum length 6)
  • Confirm Password (required, must match Password)
  • Email (required, valid email format)

Solution

Template

<!-- registration.component.html -->
<form #registrationForm="ngForm" (ngSubmit)="onSubmit(registrationForm)">
  <div>
    <label for="username">Username:</label>
    <input type="text" id="username" name="username" ngModel required>
    <div *ngIf="registrationForm.submitted && registrationForm.controls.username?.invalid">
      <small *ngIf="registrationForm.controls.username?.errors?.required">Username is required.</small>
    </div>
  </div>
  <div>
    <label for="password">Password:</label>
    <input type="password" id="password" name="password" ngModel required minlength="6">
    <div *ngIf="registrationForm.submitted && registrationForm.controls.password?.invalid">
      <small *ngIf="registrationForm.controls.password?.errors?.required">Password is required.</small>
      <small *ngIf="registrationForm.controls.password?.errors?.minlength">Password must be at least 6 characters long.</small>
    </div>
  </div>
  <div>
    <label for="confirmPassword">Confirm Password:</label>
    <input type="password" id="confirmPassword" name="confirmPassword" ngModel required>
    <div *ngIf="registrationForm.submitted && registrationForm.controls.confirmPassword?.invalid">
      <small *ngIf="registrationForm.controls.confirmPassword?.errors?.required">Confirm Password is required.</small>
      <small *ngIf="registrationForm.controls.confirmPassword?.value !== registrationForm.controls.password?.value">Passwords must match.</small>
    </div>
  </div>
  <div>
    <label for="email">Email:</label>
    <input type="email" id="email" name="email" ngModel required email>
    <div *ngIf="registrationForm.submitted && registrationForm.controls.email?.invalid">
      <small *ngIf="registrationForm.controls.email?.errors?.required">Email is required.</small>
      <small *ngIf="registrationForm.controls.email?.errors?.email">Invalid email format.</small>
    </div>
  </div>
  <button type="submit" [disabled]="registrationForm.invalid">Register</button>
</form>

Component

// registration.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-registration',
  templateUrl: './registration.component.html',
  styleUrls: ['./registration.component.css']
})
export class RegistrationComponent {
  onSubmit(form: any): void {
    if (form.valid) {
      console.log('Registration Data: ', form.value);
    } else {
      console.log('Form is invalid');
    }
  }
}

Common Mistakes and Tips

  • Forgetting to import FormsModule: Ensure FormsModule is imported in your Angular module.
  • Not using ngModel correctly: Always bind form controls using ngModel to ensure two-way data binding.
  • Ignoring validation: Always validate form inputs to ensure data integrity and provide feedback to users.

Conclusion

Template-driven forms in Angular provide a simple and effective way to handle form inputs and validations. By leveraging Angular's directives and binding syntax, you can create robust forms with minimal code. In the next topic, we will explore reactive forms, which offer more control and flexibility for complex form scenarios.

◄ Previous
◄
Next ►
►
The Project | About Us | Contribute | Donations | License
© Copyright 2024. All rights reserved