What are Form Controls in Angular
💡 Concept Name
FormControl – A class in Angular used to track the value and validation status of an individual form input element within reactive forms.
📘 Quick Intro
Form controls represent the basic building blocks of forms in Angular. Each input field is represented by a FormControl that stores the current value, validation state, and interaction status.
🧠 Analogy / Short Story
Think of a FormControl like a digital sensor on a thermostat. It constantly monitors the temperature (input value), checks whether it's within the acceptable range (valid), and reports changes to the central system (form group).
🔧 Technical Explanation
- 🛠️ A
FormControlmanages a single input field. - 🎯 Tracks user input value in real-time.
- 📋 Maintains validation status (valid, invalid, pending).
- 📦 Part of
FormGroupor used standalone. - 💡 Exposes properties like
.value,.valid,.touched, and.errors. - ✅ Used with built-in or custom validators.
🎯 Purpose & Use Case
- ✅ Build reactive forms with control over each input field.
- ✅ Enable dynamic validation and form logic.
- ✅ Monitor and respond to form changes programmatically.
💻 Real Code Example
// Create a FormControl with default value and validator
import { FormControl, Validators } from '@angular/forms';
usernameControl = new FormControl('', Validators.required);
// Access value and validation status
console.log(this.usernameControl.value); // ""
console.log(this.usernameControl.valid); // false
console.log(this.usernameControl.errors); // { required: true }
❓ Interview Q&A
Q1: What is a FormControl in Angular?
A: It’s a class used to manage the value and validation status of an individual input in a reactive form.
Q2: What are key properties of FormControl?
A: value, valid, errors, touched, dirty.
Q3: How do you validate a FormControl?
A: By passing Angular validators like Validators.required during initialization.
Q4: Can FormControl exist without FormGroup?
A: Yes, it can be used standalone.
Q5: How do you check if a control is touched?
A: Use the .touched property of FormControl.
📝 MCQs
Q1. Which class is used to manage input fields in Angular Reactive Forms?
- NgModel
- FormControl
- FormArray
- TemplateControl
Q2. What property checks if the form control is valid?
- touched
- value
- valid
- dirty
Q3. Which module is required for using FormControl?
- FormsModule
- ReactiveFormsModule
- HttpClientModule
- CommonModule
Q4. What does FormControl track?
- HTML structure
- Only input value
- Styling
- Value and validation status
Q5. How to apply a required validator?
- required()
- isRequired()
- Validators.required
- requiredValidator()
Q6. Can you use FormControl outside FormGroup?
- No
- Yes
- Only in ngForm
- Only with ViewChild
Q7. What property tells if the control has been interacted with?
- dirty
- touched
- invalid
- pristine
Q8. Which Angular feature reacts to real-time input change?
- NgModel
- FormBuilder
- FormControl
- ControlGroup
Q9. How do you read errors from FormControl?
- .isValid
- .errors
- .status
- .getError()
Q10. What type of form approach is FormControl part of?
- Template Forms
- Reactive Forms
- Dynamic Forms
- Component Forms
💡 Bonus Insight
You can subscribe to valueChanges on a FormControl to reactively monitor input updates and use debounceTime to optimize real-time search features.
📄 PDF Download
Need a handy summary for your notes? Download this topic as a PDF!