Form validation with template attributes in Angular - Step-by-Step Execution

Concept Flow - Form validation with template attributes

User inputs data

↓

Angular reads template attributes

↓

Validation checks run

↓

Valid?

No→Show error messages

Yes↓

Enable form submission

Angular reads validation rules from template attributes, checks user input, and shows errors or enables submission.

Execution Sample

Angular

  <input name="email" [(ngModel)]="email" required email #emailRef="ngModel">
  <div *ngIf="emailRef.invalid && emailRef.touched">
    Email is required and must be valid.
  </div>

This code validates an email input using template attributes and shows an error if invalid.

Execution Table

Step	User Input	Validation Check	Validation Result	Error Message Shown	Form Submission Enabled
1	""	required	Invalid	Yes: 'Email is required and must be valid.'	No
2	"abc"	email format	Invalid	Yes: 'Email is required and must be valid.'	No
3	"[e-mail]"	required & email	Valid	No	Yes
4	User submits form	Form valid?	Valid	No	Yes

💡 Form submission enabled only when input is valid and all validations pass.

Variable Tracker

Variable	Start	After Step 1	After Step 2	After Step 3	Final
emailRef.invalid	true	true	true	false	false
emailRef.touched	false	true	true	true	true
formSubmissionEnabled	false	false	false	true	true

Key Moments - 2 Insights

Why does the error message show even when the input is not an email format?

Because the 'required' validation fails first when input is empty or invalid, as shown in execution_table rows 1 and 2.

When does Angular mark the input as 'touched'?

Angular marks the input as 'touched' after the user interacts and leaves the field, which triggers error messages as in execution_table row 1.

Visual Quiz - 3 Questions

Look at the execution table, what is the value of emailRef.invalid at Step 3?

A true

B false

C undefined

D null

💡 Hint

Check the 'Validation Result' column at Step 3 in the execution_table.

At which step does the form submission become enabled?

A Step 3

B Step 2

C Step 1

D Step 4

💡 Hint

Look at the 'Form Submission Enabled' column in the execution_table.

If the user never touches the input, will the error message show?

A Yes, immediately

B Yes, but only after form submission

C No, because emailRef.touched is false

D No, because validation is skipped

💡 Hint

Refer to variable_tracker for emailRef.touched and execution_table row 1.

Concept Snapshot

Angular template validation uses attributes like 'required' and 'email'.
Input fields have a template reference variable to track validity.
Errors show only if input is invalid and touched.
Form submission is enabled only when all validations pass.
This approach keeps validation logic simple and declarative.

Full Transcript

In Angular, form validation with template attributes works by adding validation rules directly in the HTML input elements. For example, 'required' and 'email' attributes tell Angular what to check. Angular tracks the input's validity and whether the user has interacted with it using a template reference variable like #emailRef. When the user types and leaves the input, Angular marks it as touched. If the input is invalid and touched, an error message appears. The form submission button is enabled only when all validations pass. This method is easy to use and keeps validation logic close to the input fields.