Given this reactive form code snippet, what will be the output of console.log(this.form.valid) after setting the 'email' control to an empty string?

medium📝 Predict Output Q4 of 15

Angular - Reactive Forms

Given this reactive form code snippet, what will be the output of console.log(this.form.valid) after setting the 'email' control to an empty string?

this.form = new FormGroup({ email: new FormControl('', [Validators.required, Validators.email]) }); this.form.controls['email'].setValue('');

Atrue

Bfalse

Cundefined

Dnull

Step-by-Step Solution

Solution:

Step 1: Analyze validators on 'email'
The 'email' control requires a non-empty valid email string due to Validators.required and Validators.email.
Step 2: Check value set and form validity
Setting the value to empty string violates Validators.required, so form.valid becomes false.
Final Answer:
false -> Option B
Quick Check:
Empty required field = form invalid = false [OK]

Quick Trick: Empty required field makes form invalid [OK]

Common Mistakes:

MISTAKES

Assuming empty string passes Validators.required
Confusing form.valid with form.value
Expecting undefined or null as output

Master "Reactive Forms" in Angular

9 interactive learning modes - each teaches the same concept differently

Learn Why Deep Visual Try Challenge Project Recall Perf

Want More Practice?

15+ quiz questions · All difficulty levels · Free

Free Signup - Practice All Questions

More Angular Quizzes

Given this reactive form code snippet, what will be the output of console.log(this.form.valid) after setting the 'email' control to an empty string?

Step 1: Analyze validators on 'email'

Step 2: Check value set and form validity

Final Answer:

Quick Check:

Want More Practice?