ngForm directive and form state in Angular - Mini Project: Build & Apply

Using ngForm Directive and Tracking Form State in Angular

📖 Scenario: You are building a simple user registration form for a website. The form will collect a user's name and email. You want to use Angular's ngForm directive to manage the form state and track if the form is valid or not.

🎯 Goal: Create an Angular standalone component with a form using the ngForm directive. The form should have two input fields: name and email. You will track the form's validity and display a message when the form is valid.

📋 What You'll Learn

Create a form using the ngForm directive

Add two input fields with names name and email

Add a variable to hold the form reference

Use Angular template syntax to check the form's validity

Display a message when the form is valid

💡 Why This Matters

🌍 Real World

Forms are everywhere on websites and apps. Using ngForm helps manage form data and validation easily in Angular.

💼 Career

Understanding ngForm and form state is essential for Angular developers building user input forms with validation and accessibility.

1

Create the form with ngForm directive and input fields

Create a standalone Angular component named UserFormComponent. Inside its template, create a <form> element with the ngForm directive. Add two input fields inside the form: one with name="name" and another with name="email". Use type="text" for both inputs.

Angular

Need a hint?

Remember to import FormsModule and add ngForm to the <form> tag.

2

Add a template reference variable to the form

Inside the <form> element, add a template reference variable named userForm that refers to the form's ngForm directive instance.

Angular

import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';

@Component({
  selector: 'app-user-form',
  standalone: true,
  imports: [FormsModule],
  template: `
    
      
      
    
  `
})
export class UserFormComponent {}

// Add the template reference variable #userForm="ngForm" to the form tag

Need a hint?

Use #userForm="ngForm" inside the <form> tag to create the reference.

3

Add validation to input fields and check form validity

Add the required attribute to both input fields. Below the form, add a paragraph that uses Angular's interpolation to display the text "Form is valid!" only when the form referenced by userForm is valid.

Angular

import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';

@Component({
  selector: 'app-user-form',
  standalone: true,
  imports: [FormsModule],
  template: `
    
      
      
    
    Form is valid!
  `
})
export class UserFormComponent {}

// Add required attributes and *ngIf to show message when form is valid

Need a hint?

Use required on inputs and *ngIf="userForm.valid" on the paragraph.

4

Add accessibility and final touches

Add aria-label attributes to both input fields with values "Name input" and "Email input" respectively. Also, add a submit button inside the form with the text Submit.

Angular

import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';

@Component({
  selector: 'app-user-form',
  standalone: true,
  imports: [FormsModule],
  template: `
    
      
      
      Submit
    
    Form is valid!
  `
})
export class UserFormComponent {}

// Add aria-labels and a submit button inside the form

Need a hint?

Use aria-label on inputs and add a <button type="submit"> inside the form.