FormControl basics in Angular - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the initial value of this FormControl?

Consider the following Angular code snippet creating a FormControl. What will be the initial value of nameControl.value?

Angular

import { FormControl } from '@angular/forms';

const nameControl = new FormControl('Alice');

A '' (empty string)

B 'Alice'

C undefined

D null

💡 Hint

Check what value is passed when creating the FormControl.

The FormControl is initialized with the string 'Alice', so its value property starts as 'Alice'.

❓ state_output

intermediate

What is the value of emailControl.value after update?

Given this Angular FormControl, what will be the value of emailControl.value after calling setValue('[e-mail]')?

Angular

import { FormControl } from '@angular/forms';

const emailControl = new FormControl('');
emailControl.setValue('[e-mail]');

A null

B undefined

C '[e-mail]'

D '' (empty string)

💡 Hint

setValue changes the FormControl's value.

Calling setValue updates the FormControl's value to the new string provided.

❓ lifecycle

advanced

What happens when markAsTouched() is called on a FormControl?

In Angular, after calling markAsTouched() on a FormControl, which of the following is true?

Angular

import { FormControl } from '@angular/forms';

const control = new FormControl('');
control.markAsTouched();

A The control's <code>untouched</code> property becomes true

B The control's <code>dirty</code> property becomes true

C The control's <code>pristine</code> property becomes true

D The control's <code>touched</code> property becomes true

💡 Hint

Touched means the user has focused and left the control.

markAsTouched sets the touched property to true, indicating the control was visited.

📝 Syntax

advanced

Which option correctly creates a FormControl with a required validator?

Select the correct Angular code to create a FormControl with an initial empty string and a required validator.

Angular

import { Validators } from '@angular/forms';

A new FormControl('', [Validators.required])

B new FormControl('', Validators.required)

C new FormControl(Validators.required, '')

D new FormControl([Validators.required], '')

💡 Hint

Validators go as the second argument in an array.

The correct syntax passes the initial value first, then an array of validators as the second argument.

🔧 Debug

expert

Why does this FormControl's value not update on input?

Given this Angular template and component code, why does the FormControl's value not update when typing in the input field? Component: import { Component } from '@angular/core'; import { FormControl } from '@angular/forms'; @Component({ selector: 'app-email', templateUrl: './email.component.html' }) export class EmailComponent { email = new FormControl(''); } Template:

Angular

<input type="email" [formControl]="email" (input)="email.setValue($event.target.value)" />

A The (input) event handler causes a loop and prevents proper update

B The FormControl is missing a validator

C The input type should be text, not email

D The FormControl must be initialized with null, not empty string

💡 Hint

Using both [formControl] and (input) with setValue causes conflicts.

Binding [formControl] already updates the value on input. Adding (input) with setValue causes redundant updates and can break the control's value syncing.