Form validation with template attributes in Angular - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What happens when the user submits this Angular template-driven form?

Consider this Angular template snippet for a simple form:

<form #myForm="ngForm" (ngSubmit)="onSubmit(myForm)">
  <input name="email" ngModel required email />
  <button type="submit">Submit</button>
</form>

What will be the state of myForm.valid if the input is empty and the user clicks Submit?

Angular

<form #myForm="ngForm" (ngSubmit)="onSubmit(myForm)">
  <input name="email" ngModel required email />
  <button type="submit">Submit</button>
</form>

A myForm.valid will be false because the required field is empty.

B myForm.valid will be true because the form submits anyway.

C myForm.valid will be undefined because no validation runs on submit.

D myForm.valid will be true only if the input has any text, even if not an email.

💡 Hint

Think about what the required attribute does in Angular forms.

The required attribute marks the input as mandatory. If empty, Angular sets myForm.valid to false, preventing submission.

📝 Syntax

intermediate

Which template attribute correctly validates a minimum length of 5 characters?

In Angular template-driven forms, which attribute correctly enforces a minimum length of 5 characters on an input?

Angular

<input name="username" ngModel ... />

A min="5"

B minLength="5"

C minlength="5"

D min_length="5"

💡 Hint

Angular uses standard HTML5 validation attributes for length.

The correct attribute is minlength all lowercase. Angular recognizes it for validation.

🔧 Debug

advanced

Why does this Angular form input not validate the email correctly?

Look at this input in an Angular template-driven form:

<input name="userEmail" ngModel required type="email" />

Despite entering invalid emails, the form shows userEmail.valid as true. What is the likely cause?

Angular

<input name="userEmail" ngModel required type="email" />

A The input is missing the <code>email</code> attribute for Angular validation.

B The <code>type="email"</code> attribute disables Angular validation.

C The <code>required</code> attribute conflicts with <code>type="email"</code>.

D Angular does not support email validation in template-driven forms.

💡 Hint

Angular template-driven forms need a specific attribute for email validation.

Angular requires the email attribute on inputs to apply its email validator. Just type="email" is not enough.

❓ state_output

advanced

What is the value of myForm.controls['password'].errors after input?

Given this Angular template-driven form input:

<input name="password" ngModel required minlength="8" />

If the user types "abc" in the password field, what will myForm.controls['password'].errors contain?

Angular

<input name="password" ngModel required minlength="8" />

A null

B {"minlength": {"requiredLength": 8, "actualLength": 3}}

C {"required": true}

D {"maxlength": {"requiredLength": 8, "actualLength": 3}}

💡 Hint

Think about what errors Angular reports when minlength is not met.

Angular sets the minlength error with details about required and actual lengths when input is too short.

🧠 Conceptual

expert

Why use template attributes for validation instead of reactive forms validators?

In Angular, template-driven forms use validation attributes like required and minlength directly in the template. Reactive forms use validator functions in the component code.

What is a key advantage of using template attributes for validation?

A They support asynchronous validation out of the box.

B They provide better performance than reactive form validators.

C They enable validation logic to run on the server automatically.

D They allow quick, declarative validation without writing extra TypeScript code.

💡 Hint

Think about simplicity and where validation rules live.

Template attributes let you add validation rules directly in HTML, making it easier and faster to set up simple validations without extra code.