FormControl basics in Angular - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is a FormControl in Angular?

A <code>FormControl</code> is a class that tracks the value and validation status of an individual form input element. It helps manage user input and form state.

beginner

How do you create a simple FormControl in Angular?

You create it by importing <code>FormControl</code> from <code>@angular/forms</code> and then initializing it like this: <code>const nameControl = new FormControl('');</code> This sets up a control with an empty initial value.

beginner

How can you get the current value of a FormControl?

You access the value property of the FormControl. For example, nameControl.value returns the current input value.

beginner

What is the purpose of validators in a FormControl?

Validators check if the input value meets certain rules, like required fields or minimum length. They help keep the form data correct and useful.

intermediate

How do you listen for changes in a FormControl?

You subscribe to the valueChanges observable. For example: nameControl.valueChanges.subscribe(value => console.log(value)); This runs code whenever the input changes.

What does a FormControl track in Angular?

A The value and validation status of a form input

B The layout of the form

C The routing of the application

D The CSS styles of the form

A FormControl tracks the value and validation status of a single form input.

How do you create a new FormControl with an initial value of 'hello'?

A new FormControl()

B new FormGroup('hello')

C new FormControl('hello')

D new FormBuilder('hello')

You create a FormControl by calling new FormControl('hello') to set the initial value.

Which property gives you the current value of a FormControl?

A value

B status

C valid

D errors

The value property holds the current input value of the FormControl.

What is the role of validators in a FormControl?

A To reset the form

B To check if input meets rules like required or length

C To submit the form automatically

D To style the input field

Validators ensure the input follows rules such as being required or having a minimum length.

How do you react to changes in a FormControl value?

A Use <code>setValue()</code>

B Use <code>ngOnInit</code>

C Call <code>reset()</code>

D Subscribe to <code>valueChanges</code>

You subscribe to the valueChanges observable to run code when the input changes.

Explain what a FormControl is and how you create one in Angular.

Think about managing a single input field's data and rules.

Describe how you can check the current value and listen for changes in a FormControl.

One is a property, the other is an observable.