ngForm directive and form state in Angular - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the initial state of an Angular form using ngForm?

Consider a simple Angular template-driven form using ngForm. What is the initial value of the form's valid and pristine properties right after the form loads?

Angular

<form #myForm="ngForm">
  <input name="email" ngModel required />
</form>

A valid: false, pristine: true

B valid: true, pristine: false

C valid: false, pristine: false

D valid: true, pristine: true

💡 Hint

Think about required fields and whether the user has changed anything yet.

The form is initially pristine because the user hasn't interacted with it yet. Since the required field is empty, the form is invalid at the start.

❓ state_output

intermediate

What is the form's dirty state after user input?

Given this Angular form, after the user types any character into the input field, what will be the value of myForm.dirty?

Angular

<form #myForm="ngForm">
  <input name="username" ngModel />
</form>

A null

B true

C undefined

D false

💡 Hint

Dirty means the user has changed the form since it loaded.

Once the user changes any input, the form's dirty property becomes true.

📝 Syntax

advanced

Which option correctly binds the ngForm directive to a template reference variable?

Select the correct syntax to create a template reference variable named formRef that references the ngForm directive on a form element.

A <form #formRef>

B <form #formRef="ngform">

C <form #formRef="form">

D <form #formRef="ngForm">

💡 Hint

Angular is case sensitive for directive export names.

The correct syntax uses #formRef="ngForm" with exact casing to reference the ngForm directive.

🔧 Debug

advanced

Why does this Angular form's valid property always stay true even with an empty required input?

Examine the code below. The input is marked as required, but the form's valid property remains true even when the input is empty. What is the cause?

Angular

<form #myForm="ngForm">
  <input name="email" required />
</form>

A The input is missing the <code>ngModel</code> directive, so validation is not tracked.

B The form reference variable is incorrectly named.

C The <code>required</code> attribute is misspelled, so it is ignored.

D The form tag is missing the <code>novalidate</code> attribute.

💡 Hint

Angular needs ngModel to track form control state.

Without ngModel, Angular does not register the input as a form control, so validation does not apply.

🧠 Conceptual

expert

How does Angular's ngForm directive aggregate child controls' states?

In Angular template-driven forms, how does the ngForm directive determine the overall form's valid and dirty states?

A It randomly picks one child control's state each time to set the form state.

B It only checks the first child control's state to determine the form state.

C It combines the states of all child controls; the form is valid only if all controls are valid, and dirty if any control is dirty.

D It ignores child controls and always sets valid to true and dirty to false.

💡 Hint

Think about how a group behaves when one member changes or fails.

The ngForm directive aggregates all child controls. The form is valid only if every control is valid. The form is dirty if any control has been changed.