Reactive forms keep a model of values, validation and interaction state. The form model should own edits rather than compete with unrelated two-way binding.
Before you start
You should understand a component’s class, template and dependencies. Follow both the framework lifecycle and the ownership of each value or resource. Apply examples inside an Angular application; the surrounding application configuration and imports depend on the feature being demonstrated.
The practical goal is to reason through this situation: A FormControl holds email and exposes invalid, touched and pending state. Read the walkthrough first, then try the interview exercise before opening its answer. The important part is explaining the decision and its consequences, rather than remembering a definition alone.
Step-by-step walkthrough
Step 1: Make the form authoritative
Use the form model for edited values. Avoid a second independent binding that writes the same field.
Step 2: Separate value and interaction state
Invalid does not always mean an error should display immediately. Touched or submitted state controls useful feedback timing.
Step 3: Handle server outcomes distinctly
A valid local form can still fail submission. Preserve the user’s values and present a recoverable server error.
Worked scenario
A FormControl holds email and exposes invalid, touched and pending state.
An email control starts empty and invalid, but its error appears after blur or submit. While a submission is pending, prevent accidental duplicate requests without clearing the typed email. On server rejection, retain the form data and show the server outcome separately from the field’s required or format validation.
Common mistake
Mixing independent update paths can produce contradictory values and unclear validation timing.
Verify the behavior
Test untouched, touched, valid, submitting and rejected states. Confirm no request is sent for invalid input and values survive a recoverable failure.
Interview exercise
Display an error without immediate noise.
Answer and reasoning
Show validation after appropriate touch or submit interaction, while keeping server and asynchronous failures distinct.
Continue learning
Compare the scenario with the Angular interview questions and test your understanding with the Angular MCQs. For terminology and implementation details, consult the reference material.