0
0
Angularframework~5 mins

ngForm directive and form state in Angular - Cheat Sheet & Quick Revision

Choose your learning style9 modes available
Recall & Review
beginner
What is the purpose of the ngForm directive in Angular?

The ngForm directive automatically creates a form group that tracks the value and validity of form controls inside a form element.

It helps Angular manage form state like whether the form is valid, dirty, or touched.

Click to reveal answer
beginner
Name three key form state properties tracked by ngForm.
  • valid: True if all controls are valid.
  • dirty: True if any control value has changed.
  • touched: True if any control has been focused and then blurred.
Click to reveal answer
intermediate
How does Angular update the ngForm state when a user interacts with form controls?

Angular listens to user input events on form controls and updates the ngForm state properties accordingly.

For example, when a user changes a field, dirty becomes true; when a field loses focus, touched becomes true.

Click to reveal answer
beginner
What does the ngForm directive provide to the template for form validation?

It provides a local template variable that gives access to the form's state and controls.

You can use this variable to check if the form is valid or invalid and disable submit buttons or show error messages.

Click to reveal answer
beginner
Explain the difference between pristine and dirty states in ngForm.

Pristine means the user has not changed the value of any form control yet.

Dirty means the user has changed the value of at least one form control.

These states help track if the form has been modified.

Click to reveal answer
What does the ngForm directive automatically create?
AA new HTML form element
BA JavaScript event listener
CA CSS style for the form
DA form group to track form controls
Which ngForm property becomes true when a user changes any form control value?
Adirty
Btouched
Cvalid
Dpristine
How can you access the form state in the template using ngForm?
AUsing a local template variable on the form element
BBy importing a service
CUsing a CSS class
DBy calling a JavaScript function
What does the touched state indicate in ngForm?
AThe form is valid
BThe form is submitted
CA control has been focused and then blurred
DThe form has not been changed
Which state means the user has not changed any form control value yet?
Adirty
Bpristine
Ctouched
Dinvalid
Describe how the ngForm directive helps manage form state in Angular.
Think about what happens when a user types or clicks in a form.
You got /4 concepts.
    Explain the difference between the dirty and touched states in an Angular form.
    One tracks changes, the other tracks focus.
    You got /3 concepts.