Form validation with template attributes in Angular - Mini Project: Build & Apply

Form validation with template attributes

📖 Scenario: You are building a simple user registration form for a website. The form needs to check that the user enters a valid email and a password that is at least 6 characters long before allowing submission.

🎯 Goal: Create an Angular standalone component with a form that uses template-driven validation attributes to ensure the email and password fields are valid. Show error messages when the inputs are invalid.

📋 What You'll Learn

Use Angular standalone component with standalone: true

Create a form with ngForm directive

Add required and email attributes to the email input

Add required and minlength="6" attributes to the password input

Display validation error messages below each input when invalid and touched

Add a submit button disabled when the form is invalid

💡 Why This Matters

🌍 Real World

Forms are everywhere on websites and apps. Validating user input before sending it to the server improves user experience and data quality.

💼 Career

Understanding Angular template-driven forms and validation is essential for frontend developers working on user interfaces that require input validation.

1

Create the form data model

Create a standalone Angular component named RegisterFormComponent with a user object having email and password properties both initialized to empty strings.

Angular

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

@Component({
  selector: 'app-register-form',
  standalone: true,
  template: `
    
  `
})
export class RegisterFormComponent {
  // Your code here
}

Hint

Define a user object with email and password as empty strings inside the component class.

2

Add the form and input fields with validation attributes

Inside the component template, add a <form> element with #form="ngForm". Add an email input with name="email", [(ngModel)]="user.email", required, and email attributes. Add a password input with name="password", [(ngModel)]="user.password", required, and minlength="6" attributes.

Angular

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

@Component({
  selector: 'app-register-form',
  standalone: true,
  template: `
    
      
    
  `
})
export class RegisterFormComponent {
  user = {
    email: '',
    password: ''
  };
}

Hint

Use ngModel with two-way binding and add required, email, and minlength attributes on inputs.

3

Show validation error messages below inputs

Below the email input, add a <div> that shows the text 'Email is required' if the email input is invalid and touched, and another <div> that shows 'Enter a valid email' if the email input has an email format error and is touched. Below the password input, add a <div> that shows 'Password is required' if invalid and touched, and another <div> that shows 'Password must be at least 6 characters' if minlength error and touched.

Angular

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

@Component({
  selector: 'app-register-form',
  standalone: true,
  template: `
    
      Email:
      
      

      Password:
      
      
    
  `
})
export class RegisterFormComponent {
  user = {
    email: '',
    password: ''
  };
}

Hint

Use template reference variables with #emailRef="ngModel" and #passwordRef="ngModel". Use *ngIf to conditionally show error messages based on invalid, touched, and errors.

4

Add submit button disabled when form is invalid

Inside the form, add a <button> with type submit and text Register. Disable the button when the form is invalid using [disabled]="form.invalid".

Angular

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

@Component({
  selector: 'app-register-form',
  standalone: true,
  template: `
    
      Email:
      
      
        Email is required
        Enter a valid email
      

      Password:
      
      
        Password is required
        Password must be at least 6 characters
      

      
    
  `
})
export class RegisterFormComponent {
  user = {
    email: '',
    password: ''
  };
}

Hint

Add a submit button inside the form and disable it when form.invalid is true.

Practice

1. What is the main purpose of using template attributes like required or minlength in Angular forms?

easy

A. To write complex validation logic in the component class

B. To add simple validation rules directly in the HTML template

C. To style the form inputs with CSS

D. To handle form submission events

Solution

1. Step 1: Understand template attributes role

   Template attributes like required and minlength are used in the HTML to set validation rules simply and declaratively.

2. Step 2: Differentiate from other form tasks

   These attributes do not handle styling, complex logic, or submission events but focus on validation rules in the template.

3. Final Answer:

   To add simple validation rules directly in the HTML template -> Option B

4. Quick Check:

   Template attributes = simple validation rules [OK]

Hint: Template attributes set validation rules in HTML, not logic or style [OK]

Common Mistakes:

• Confusing validation attributes with styling
• Thinking validation logic must be in the component class
• Assuming template attributes handle form submission

2. Which of the following is the correct way to mark an input as required using template attributes in Angular?

easy

A.

B.

C.

D.

Solution

1. Step 1: Recall standard HTML validation syntax

   The required attribute is a standard HTML attribute used as required without brackets or extra directives.

2. Step 2: Identify Angular template attribute usage

   Angular supports standard HTML validation attributes directly in the template, so required alone is correct.

3. Final Answer:

   <input type="text" required> -> Option C

4. Quick Check:

   Use plain required attribute for required fields [OK]

Hint: Use plain required attribute without brackets for template validation [OK]

Common Mistakes:

• Using Angular binding syntax for static required attribute
• Confusing Angular directives with HTML attributes
• Adding non-existent attributes like validate-required

3. Given this Angular template snippet:

<input type="text" name="username" ngModel required minlength="4" #usernameRef="ngModel">
<div *ngIf="usernameRef.invalid && usernameRef.touched">
  <small *ngIf="usernameRef.errors?.required">Username is required.</small>
  <small *ngIf="usernameRef.errors?.minlength">Minimum 4 characters.</small>
</div>

What will happen if the user types "abc" and then clicks outside the input?

medium

A. The message "Minimum 4 characters." will be shown

B. No message will be shown because the input is valid

C. The message "Username is required." will be shown

D. Both messages will be shown

Solution

1. Step 1: Check input value against validation rules

   The input value "abc" has 3 characters, which is less than the minlength of 4, so minlength validation fails.

2. Step 2: Determine which error messages show on invalid and touched

   The input is not empty, so required is satisfied. Since usernameRef.invalid and usernameRef.touched are true, only the minlength error message appears.

3. Final Answer:

   The message "Minimum 4 characters." will be shown -> Option A

4. Quick Check:

   Input too short = minlength error shown [OK]

Hint: Check which validation fails for input value and touched state [OK]

Common Mistakes:

• Showing required error when input is not empty
• Showing no message when input is invalid and touched
• Showing both errors when only one applies

4. Identify the error in this Angular template snippet for form validation:

<input type="email" name="email" ngModel required #emailRef>
<div *ngIf="emailRef.invalid && emailRef.touched">
  <small *ngIf="emailRef.errors.required">Email is required.</small>
  <small *ngIf="emailRef.errors.email">Invalid email format.</small>
</div>

medium

A. The input type should be "text" instead of "email"

B. The required attribute should be [required]="true"

C. The *ngIf conditions should use OR (||) instead of AND (&&)

D. Missing template reference variable export like #emailRef="ngModel"

Solution

1. Step 1: Check template reference variable usage

   The template reference variable #emailRef is used to access validation state, but it lacks the export ="ngModel" which is needed to access invalid and errors.

2. Step 2: Validate other parts

   The required attribute is correct as is, AND logic for showing errors is appropriate, and input type "email" is valid for email validation.

3. Final Answer:

   Missing template reference variable export like #emailRef="ngModel" -> Option D

4. Quick Check:

   Template ref must export ngModel for validation access [OK]

Hint: Always export ngModel in template ref to access validation state [OK]

Common Mistakes:

• Omitting ="ngModel" in template reference variable
• Changing required attribute to binding unnecessarily
• Misusing logical operators in *ngIf
• Changing input type incorrectly

5. You want to disable the submit button until the form is valid using template-driven validation. Which of these is the best way to do it?

<form #myForm="ngForm">
  <input name="email" ngModel required email>
  <button type="submit" [disabled]="???">Submit</button>
</form>

What should replace ??? to disable the button until the form is valid?

hard

A. myForm.invalid

B. myForm.valid

C. myForm.touched

D. !myForm.pristine

Solution

1. Step 1: Understand form validity properties

   The form object has a property invalid which is true when the form is not valid, and valid which is true when valid.

2. Step 2: Choose the best expression to disable button

   Disabling the button when myForm.invalid is true means the button is disabled until the form becomes valid. Using myForm.valid would disable when valid (incorrect). Other options relate to touch or pristine state, not validity.

3. Final Answer:

   myForm.invalid -> Option A

4. Quick Check:

   Disable button when form.invalid is true [OK]

Hint: Use form.invalid to disable submit until form is valid [OK]

Common Mistakes:

• Using myForm.valid instead of myForm.invalid
• Disabling based on touched or pristine instead of validity
• Confusing valid and invalid properties