@angular/forms
Implements a set of directives and providers to communicate with native DOM elements when building forms to capture user input.
Use this API to register directives, build form and data models, and provide validation to your forms. Validators can be synchronous or asynchronous depending on your use case. You can also extend the built-in functionality provided by forms in Angular by using the interfaces and tokens to create custom validators and input elements.
Angular forms allow you to:
- Capture the current value and validation status of a form.
- Track and listen for changes to the form's data model.
- Validate the correctness of user input.
- Create custom validators and input elements.
You can build forms in one of two ways:
- Reactive forms use existing instances of a
FormControl
orFormGroup
to build a form model. This form model is synced with form input elements through directives to track and communicate changes back to the form model. Changes to the value and status of the controls are provided as observables. - Template-driven forms rely on directives such as
NgModel
andNgModelGroup
create the form model for you, so any changes to the form are communicated through the template.
See also
Find out more in the Forms Overview.
Entry points
Primary
@angular/forms |
Implements a set of directives and providers to communicate with native DOM elements when building forms to capture user input. |
Primary entry point exports
NgModules
FormsModule |
Exports the required providers and directives for template-driven forms, making them available for import by NgModules that import this module. |
ReactiveFormsModule |
Exports the required infrastructure and directives for reactive forms, making them available for import by NgModules that import this module. |
Classes
AbstractControl |
This is the base class for |
AbstractControlDirective |
Base class for control directives. |
AbstractFormGroupDirective |
A base class for code shared between the |
ControlContainer |
A base class for directives that contain multiple registered instances of |
FormArray |
Tracks the value and validity state of an array of |
FormBuilder |
Creates an |
FormControl |
Tracks the value and validation status of an individual form control. |
FormGroup |
Tracks the value and validity state of a group of |
NgControl |
A base class that all control |
Validators |
Provides a set of built-in validators that can be used by form controls. |
Structures
AbstractControlOptions |
Interface for options provided to an |
AsyncValidator |
An interface implemented by classes that perform asynchronous validation. |
AsyncValidatorFn |
A function that receives a control and returns a Promise or observable that emits validation errors if present, otherwise null. |
ControlValueAccessor |
Defines an interface that acts as a bridge between the Angular forms API and a native element in the DOM. |
Form |
An interface implemented by |
Validator |
An interface implemented by classes that perform synchronous validation. |
ValidatorFn |
A function that receives a control and synchronously returns a map of validation errors if present, otherwise null. |
Directives
CheckboxControlValueAccessor |
A |
CheckboxRequiredValidator |
A Directive that adds the |
DefaultValueAccessor |
The default |
EmailValidator |
A directive that adds the |
FormArrayName |
Syncs a nested |
FormControlDirective |
|
FormControlName |
Syncs a |
FormGroupDirective |
Binds an existing |
FormGroupName |
Syncs a nested |
MaxLengthValidator |
A directive that adds max length validation to controls marked with the
|
MinLengthValidator |
A directive that adds minimum length validation to controls marked with the
|
NgControlStatus |
Directive automatically applied to Angular form controls that sets CSS classes based on control status. |
NgControlStatusGroup |
Directive automatically applied to Angular form groups that sets CSS classes based on control status (valid/invalid/dirty/etc). |
NgForm |
Creates a top-level |
NgFormSelectorWarning |
Deprecated: in Angular v6 and will be removed in Angular v9. This directive is solely used to display warnings when the deprecated |
NgModel |
Creates a |
NgModelGroup |
Creates and binds a |
NgSelectOption |
Marks |
PatternValidator |
A directive that adds regex pattern validation to controls marked with the
|
RadioControlValueAccessor |
The |
RequiredValidator |
A directive that adds the |
SelectControlValueAccessor |
The |
SelectMultipleControlValueAccessor |
The |
Types
COMPOSITION_BUFFER_MODE |
Provide this token to control if form directives buffer IME input until the "compositionend" event occurs. |
NG_ASYNC_VALIDATORS |
An |
NG_VALIDATORS |
An |
NG_VALUE_ACCESSOR |
Used to provide a |
ValidationErrors |
Defines the map of errors returned from failed validation checks. |