ngForm directive and form state in Angular - Step-by-Step Execution

Concept Flow - ngForm directive and form state

User opens page with form

↓

Angular creates <form> element

↓

ngForm directive attaches

↓

Form controls register with ngForm

↓

User interacts with controls

↓

ngForm updates form state: valid, dirty, touched

↓

Form state available for template and logic

Angular creates a form element, attaches ngForm directive, registers controls, and tracks form state as user interacts.

Execution Sample

Angular

<form #myForm="ngForm">
  <input name="email" ngModel required>
  <button [disabled]="!myForm.valid">Submit</button>
</form>

A simple form with ngForm directive tracking validity and disabling submit if invalid.

Execution Table

Step	Action	Form State (valid, dirty, touched)	Control State (email)	Button Disabled
1	Page loads, form created	valid: false, dirty: false, touched: false	valid: false, dirty: false, touched: false	true
2	User focuses email input	valid: false, dirty: false, touched: false	valid: false, dirty: false, touched: false	true
3	User types '[e-mail]'	valid: true, dirty: true, touched: false	valid: true, dirty: true, touched: false	false
4	User blurs email input	valid: true, dirty: true, touched: true	valid: true, dirty: true, touched: true	false
5	User clears email input	valid: false, dirty: true, touched: true	valid: false, dirty: true, touched: true	true
6	User submits form	valid: false, dirty: true, touched: true	valid: false, dirty: true, touched: true	true

💡 Form remains invalid after clearing input, submit button stays disabled.

Variable Tracker

Variable	Start	After Step 2	After Step 3	After Step 4	After Step 5	After Step 6
myForm.valid	false	false	true	true	false	false
myForm.dirty	false	false	true	true	true	true
myForm.touched	false	false	false	true	true	true
email.valid	false	false	true	true	false	false
email.dirty	false	false	true	true	true	true
email.touched	false	false	false	true	true	true
button.disabled	true	true	false	false	true	true

Key Moments - 3 Insights

Why is the form invalid at the start even though no input was touched?

At step 1, the form is invalid because the required email input is empty. The form validity depends on control validity, not user interaction yet.

What does 'dirty' mean and when does it change?

Dirty means the user changed the input value. At step 3, typing '[e-mail]' sets dirty to true. Before that, it was false.

Why does the submit button disable again after clearing the input?

At step 5, clearing the input makes the email invalid again, so form.valid becomes false and button.disabled becomes true.

Visual Quiz - 3 Questions

Look at the execution table, what is the form's 'touched' state after step 3?

A true

B undefined

C false

D null

💡 Hint

Check the 'Form State' column at step 3 in the execution_table.

At which step does the submit button become enabled?

A Step 3

B Step 1

C Step 5

D Step 6

💡 Hint

Look at the 'Button Disabled' column in the execution_table.

If the email input was never touched, what would be the form's 'dirty' state at step 6?

A true

B false

C null

D undefined

💡 Hint

Refer to the 'dirty' state changes in variable_tracker for myForm and email.

Concept Snapshot

ngForm directive attaches to <form> and tracks form state.
Controls register with ngForm and update validity, dirty, touched.
Form state updates as user interacts.
Use form.valid, form.dirty, form.touched in template.
Submit button can disable based on form.valid.
ngForm simplifies reactive form state management.

Full Transcript

When Angular loads a form with the ngForm directive, it creates a form element and attaches the directive. Each input control inside registers with ngForm. The form tracks states like valid, dirty, and touched based on user interaction. Initially, the form is invalid because required inputs are empty. When the user types a valid email, the form becomes valid and dirty. Blurring the input sets touched to true. Clearing the input again invalidates the form and disables the submit button. This process helps developers easily manage form state and control UI behavior like disabling buttons.

Practice

1. What does the ngForm directive do in Angular?

easy

A. It tracks the state and validity of a form and its inputs.

B. It styles the form elements automatically.

C. It replaces the need for HTML form tags.

D. It sends form data directly to the server.

Solution

1. Step 1: Understand the role of ngForm

   The ngForm directive is used to track the state of a form and its inputs in Angular.

2. Step 2: Identify what ngForm does not do

   It does not style elements, replace HTML tags, or send data directly; it manages form state and validation.

3. Final Answer:

   It tracks the state and validity of a form and its inputs. -> Option A

4. Quick Check:

   ngForm tracks form state = D [OK]

Hint: Remember: ngForm manages form state, not styling or data sending [OK]

Common Mistakes:

• Thinking ngForm styles the form
• Assuming ngForm replaces HTML form tags
• Believing ngForm sends data automatically

2. Which of the following is the correct way to create a local reference to a form using ngForm in Angular?

easy

A. ...

B. ...

C. ...

D. ...

Solution

1. Step 1: Recall the syntax for local form reference

   To access the form's state, Angular uses a template reference variable with ngForm as its value, like #myForm="ngForm".

2. Step 2: Check each option's correctness

   ... correctly uses #myForm="ngForm". ... misses the directive name, C misplaces the directive, and D uses incorrect binding syntax.

3. Final Answer:

   <form #myForm="ngForm"> ... </form> -> Option B

4. Quick Check:

   Local form reference = #myForm="ngForm" [OK]

Hint: Use #var="ngForm" to access form state locally [OK]

Common Mistakes:

• Omitting the "ngForm" in the reference
• Using square brackets incorrectly
• Placing ngForm attribute wrongly

3. Given this Angular template snippet:

<form #f="ngForm">
  <input name="email" ngModel required>
  <button [disabled]="!f.form.valid">Submit</button>
</form>

What happens to the Submit button when the input is empty?

medium

A. The Submit button is enabled regardless of input.

B. The Submit button is disabled only if the input is touched.

C. The Submit button is disabled because the form is invalid.

D. The Submit button is enabled only if the input is dirty.

Solution

1. Step 1: Understand form validity with required input

   The input has the required attribute, so if empty, the form is invalid.

2. Step 2: Analyze the button's disabled binding

   The button is disabled when !f.form.valid is true, meaning when the form is invalid.

3. Final Answer:

   The Submit button is disabled because the form is invalid. -> Option C

4. Quick Check:

   Required empty input disables button = B [OK]

Hint: Button disabled if form invalid (required empty input) [OK]

Common Mistakes:

• Thinking button enables on untouched input
• Confusing dirty and valid states
• Ignoring required validation effect

4. Identify the error in this Angular form snippet:

<form #myForm="ngForm">
  <input name="username" ngModel>
  <button [disabled]="myForm.invalid">Submit</button>
</form>

Why does the Submit button remain enabled even when the input is empty?

medium

A. The button binding should use myForm.form.invalid instead of myForm.invalid.

B. The local reference #myForm is incorrectly declared.

C. The ngModel directive is missing on the input.

D. The input lacks a validation rule like required, so form is valid.

Solution

1. Step 1: Check input validation rules

   The input has no validation like required, so it does not make the form invalid when empty.

2. Step 2: Confirm form validity property usage

   myForm.invalid is valid shorthand for myForm.form.invalid, so no error there.

3. Final Answer:

   The input lacks a validation rule like required, so form is valid. -> Option D

4. Quick Check:

   Missing required means form valid = C [OK]

Hint: Add required to input to make form invalid when empty [OK]

Common Mistakes:

• Assuming myForm.invalid is incorrect syntax
• Forgetting to add validation rules
• Thinking ngModel is missing when it is present

5. You want to disable the Submit button only after the user has changed any input in the form and the form is invalid. Which condition correctly uses ngForm states to achieve this?

hard

A. [disabled]="myForm.form.invalid && myForm.form.dirty"

B. [disabled]="myForm.invalid || myForm.pristine"

C. [disabled]="!myForm.form.valid && myForm.touched"

D. [disabled]="myForm.form.valid && myForm.dirty"

Solution

1. Step 1: Understand form state properties

   myForm.form.invalid is true if form is invalid; myForm.form.dirty is true if user changed any input.

2. Step 2: Match condition to requirement

   We want to disable the button only if form is invalid AND user has changed input, so both must be true.

3. Final Answer:

   [disabled]="myForm.form.invalid && myForm.form.dirty" -> Option A

4. Quick Check:

   Disable if invalid and dirty = A [OK]

Hint: Use invalid AND dirty to disable after user changes invalid form [OK]

Common Mistakes:

• Using OR instead of AND for disabling
• Confusing touched with dirty
• Checking valid instead of invalid