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.