graph LR
AbstractControl["AbstractControl"]
FormControl["FormControl"]
FormGroup["FormGroup"]
FormBuilder["FormBuilder"]
NgModel["NgModel"]
FormControlDirective["FormControlDirective"]
ControlValueAccessor["ControlValueAccessor"]
Validators["Validators"]
FormGroup -- "extends" --> AbstractControl
FormControl -- "extends" --> AbstractControl
FormBuilder -- "instantiates" --> FormControl
FormBuilder -- "instantiates" --> FormGroup
NgModel -- "binds to" --> AbstractControl
NgModel -- "utilizes" --> ControlValueAccessor
FormControlDirective -- "binds to" --> AbstractControl
FormControlDirective -- "utilizes" --> ControlValueAccessor
AbstractControl -- "uses" --> Validators
click AbstractControl href "https://github.com/CodeBoarding/GeneratedOnBoardings/blob/main/angular/AbstractControl.md" "Details"
click FormControl href "https://github.com/CodeBoarding/GeneratedOnBoardings/blob/main/angular/FormControl.md" "Details"
click FormGroup href "https://github.com/CodeBoarding/GeneratedOnBoardings/blob/main/angular/FormGroup.md" "Details"
click FormBuilder href "https://github.com/CodeBoarding/GeneratedOnBoardings/blob/main/angular/FormBuilder.md" "Details"
click NgModel href "https://github.com/CodeBoarding/GeneratedOnBoardings/blob/main/angular/NgModel.md" "Details"
The Angular Forms architecture is centered on a hierarchical model rooted in AbstractControl, which provides a consistent API for managing form state. FormControl and FormGroup are concrete implementations of AbstractControl, representing individual inputs and collections of controls, respectively. The FormBuilder service streamlines the creation of these form structures. Interaction between the form model and the UI is facilitated by directives like NgModel and FormControlDirective, which rely on the ControlValueAccessor interface to abstract away DOM manipulation. Validation is handled by the Validators utility, offering a set of reusable validation functions that can be applied to any AbstractControl. This design promotes modularity, testability, and a clear separation of concerns between the form's data model and its presentation.
AbstractControl [Expand]
The foundational abstract class for all form controls, defining the common API and state management (e.g., value, status, valid, dirty). It serves as the base for individual controls and groups of controls.
Related Classes/Methods:
FormControl [Expand]
Represents an individual input field's value and validation status. It is the most granular unit in the forms model.
Related Classes/Methods:
FormGroup [Expand]
Manages a collection of AbstractControl instances (e.g., FormControl, FormGroup, FormArray) as a single unit, aggregating their values and validation status.
Related Classes/Methods:
FormBuilder [Expand]
A service that provides a convenient API for programmatically creating instances of FormControl, FormGroup, and FormArray, simplifying the setup of complex reactive forms.
Related Classes/Methods:
NgModel [Expand]
A directive used in template-driven forms that creates an implicit FormControl instance for a DOM element and establishes two-way data binding between the element and the form model.
Related Classes/Methods:
A directive used in reactive forms that explicitly links an existing FormControl instance from the component's class to a specific DOM element in the template.
Related Classes/Methods:
An interface that defines how form controls interact with native DOM elements or custom components, bridging the model and view by providing methods for writing values to the view and registering change/touch callbacks.
Related Classes/Methods:
A collection of static methods that provide common validation patterns (e.g., required, minLength, pattern) for form controls.
Related Classes/Methods: