Form validation with template attributes in Angular - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to add a required validator to the input field.

Angular

<input type="text" name="username" ngModel [1]>

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

Aminlength

Brequired

Cpattern

Dmaxlength

Attempts:

3 left

💡 Hint

Common Mistakes

Using minlength instead of required

Forgetting to add ngModel directive

The required attribute makes the input mandatory.

2fill in blank

medium

Complete the code to add a minimum length validator of 5 characters.

Angular

<input type="text" name="password" ngModel [1]="5">

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

Aminlength

Brequired

Cmaxlength

Dpattern

Attempts:

3 left

💡 Hint

Common Mistakes

Using maxlength instead of minlength

Not providing a value for the attribute

The minlength attribute sets the minimum number of characters allowed.

3fill in blank

hard

Fix the error in the code to validate the email input using a pattern.

Angular

<input type="email" name="userEmail" ngModel [1]="^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$">

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

Arequired

Bminlength

Cmaxlength

Dpattern

Attempts:

3 left

💡 Hint

Common Mistakes

Using minlength for pattern validation

Omitting the pattern attribute

The pattern attribute allows custom regex validation for the input.

4fill in blank

hard

Fill both blanks to add a maximum length of 10 and make the input required.

Angular

<input type="text" name="nickname" ngModel [1]="10" [2]>

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

Amaxlength

Bminlength

Crequired

Dpattern

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing minlength with maxlength

Forgetting to add required attribute

maxlength limits input length, and required makes it mandatory.

5fill in blank

hard

Fill all three blanks to create an input that is required, has a minlength of 3, and matches a pattern for letters only.

Angular

<input type="text" name="code" ngModel [1] [2]="3" [3]="^[a-zA-Z]+$">

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

Arequired

Bminlength

Cpattern

Dmaxlength

Attempts:

3 left

💡 Hint

Common Mistakes

Using maxlength instead of minlength

Not adding pattern for letter-only validation

The input is mandatory (required), must be at least 3 characters (minlength), and only letters are allowed (pattern).