ngForm directive and form state in Angular - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a template-driven form using ngForm.

Angular

<form #myForm="[1]">
  <input name="username" ngModel>
</form>

Drag options to blanks, or click blank then click option'

AngForm

BformGroup

CformControl

DformControlName

Attempts:

3 left

💡 Hint

Common Mistakes

Using formGroup instead of ngForm in template-driven forms.

Forgetting to add ngModel on input fields.

The ngForm directive is used to create a template-driven form in Angular. It tracks the form state and allows access to form properties.

2fill in blank

medium

Complete the code to check if the form is valid using ngForm.

Angular

<form #myForm="ngForm">
  <button [disabled]="[1]">Submit</button>
</form>

Drag options to blanks, or click blank then click option'

AmyForm.invalid

BmyForm.valid

CmyForm.pristine

DmyForm.touched

Attempts:

3 left

💡 Hint

Common Mistakes

Using myForm.valid to disable the button (this disables when valid, which is wrong).

Confusing pristine and touched with validity.

The invalid property of ngForm is true when the form has invalid controls. Disabling the button when the form is invalid prevents submission.

3fill in blank

hard

Fix the error in the code to correctly bind the form reference using ngForm.

Angular

<form [1]>
  <input name="email" ngModel>
</form>
<p *ngIf="formRef.dirty">Form is dirty</p>

Drag options to blanks, or click blank then click option'

A#ngForm

B#formRef="ngForm"

CformRef="ngForm"

D#formRef

Attempts:

3 left

💡 Hint

Common Mistakes

Using #ngForm instead of #formRef="ngForm".

Trying to bind formRef="ngForm" which is invalid syntax.

To get a reference to the form using ngForm, use #formRef="ngForm". This assigns the form directive instance to the template variable formRef.

4fill in blank

hard

Fill both blanks to create a form that disables the submit button when the form is invalid or untouched.

Angular

<form #myForm="ngForm">
  <button [disabled]="myForm.[1] || myForm.[2]">Submit</button>
</form>

Drag options to blanks, or click blank then click option'

Ainvalid

Bpristine

Ctouched

Ddirty

Attempts:

3 left

💡 Hint

Common Mistakes

Using touched instead of pristine to check if form is untouched.

Using dirty instead of pristine.

The button should be disabled if the form is invalid or pristine (not changed yet). This prevents submitting an untouched or invalid form.

5fill in blank

hard

Fill all three blanks to create a form that shows a message when the form is submitted and valid.

Angular

<form #myForm="ngForm" (ngSubmit)="[1]()">
  <input name="name" ngModel required>
  <button type="submit" [disabled]="myForm.[2]">Submit</button>
</form>
<p *ngIf="submitted && myForm.[3]">Form submitted successfully!</p>

Drag options to blanks, or click blank then click option'

AonSubmit

Binvalid

Cvalid

Dpristine

Attempts:

3 left

💡 Hint

Common Mistakes

Using pristine instead of invalid to disable the button.

Showing success message when form is invalid.

The form calls onSubmit() on submit. The button disables if the form is invalid. The success message shows if submitted is true and the form is valid.

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