Validators (required, minLength, pattern) in Angular - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What happens when a required validator is applied to an empty input?

Consider an Angular form control with the Validators.required applied. What will be the validation status if the input is empty?

Angular

this.form = new FormGroup({
  name: new FormControl('', Validators.required)
});

console.log(this.form.controls['name'].valid);

A The control throws an error due to missing input.

B The control is valid because empty string is allowed.

C The control is invalid because the input is empty.

D The control is pending validation until user types.

💡 Hint

Think about what 'required' means for a form control value.

The Validators.required ensures the input is not empty. If the input is empty, the control is invalid.

📝 Syntax

intermediate

Which option correctly applies minLength validator to a form control?

You want to require that a username input has at least 5 characters. Which code correctly applies the Validators.minLength?

A new FormControl('', Validators.minLength(5))

B new FormControl('', Validators.minLength = 5)

C new FormControl('', Validators.minLength[5])

D new FormControl('', Validators.minLength{5})

💡 Hint

Remember how to call a validator function with a parameter.

The Validators.minLength is a function that takes a number and returns a validator function. It must be called as Validators.minLength(5).

🔧 Debug

advanced

Why does this pattern validator not work as expected?

Given this form control with a pattern validator to accept only digits:

new FormControl('', Validators.pattern('[0-9]+'))

Why might it fail to validate a string of digits?

A The pattern string should be wrapped with start and end anchors: '^' and '$'.

B The pattern should use double backslashes for digits: '\\d+'.

C The pattern validator only works with letters, not digits.

D The pattern must be passed as a RegExp object, not a string.

💡 Hint

Think about what the pattern matches by default without anchors.

Without anchors, the pattern matches anywhere in the string. To ensure the entire input matches digits only, use '^' and '$' anchors.

❓ state_output

advanced

What is the validation error object when minLength fails?

If a form control has Validators.minLength(4) and the input is 'abc', what is the value of control.errors?

Angular

const control = new FormControl('abc', Validators.minLength(4));
console.log(control.errors);

A null

B { 'minlength': { 'requiredLength': 4, 'actualLength': 3 } }

C { 'minLength': { 'requiredLength': 4, 'actualLength': 3 } }

D { 'lengthError': true }

💡 Hint

Check the exact error key and properties returned by Angular's minLength validator.

The error object key is 'minlength' (all lowercase), and it contains requiredLength and actualLength properties.

🧠 Conceptual

expert

How do multiple validators combine in Angular forms?

If a form control has Validators.required and Validators.pattern('^[a-z]+$') applied together, what is the validation result when the input is an empty string?

Angular

const control = new FormControl('', [Validators.required, Validators.pattern('^[a-z]+$')]);
console.log(control.errors);

A { 'pattern': { 'requiredPattern': '^[a-z]+$', 'actualValue': '' } }

B null

C { 'required': true, 'pattern': { 'requiredPattern': '^[a-z]+$', 'actualValue': '' } }

D { 'required': true }

💡 Hint

Think about which validator fails first and how Angular reports errors.

When the input is empty, Validators.required fails, so the error object contains only { required: true }. The pattern validator is not checked if required fails.