@angular/forms
Advanced tools
Package description
The @angular/forms package is a part of the Angular framework that provides tools for creating and managing forms in Angular applications. It offers two approaches: Reactive Forms and Template-driven Forms, which allow developers to handle user input and form validation in a robust and scalable way.
Reactive Forms
Reactive Forms provide a model-driven approach to handling form inputs whose values change over time. This feature allows for more flexible, scalable, and testable forms.
import { ReactiveFormsModule } from '@angular/forms';
@NgModule({
imports: [
// other imports ...
ReactiveFormsModule
],
})
export class AppModule { }Template-driven Forms
Template-driven Forms are useful for adding simple forms to your app with minimal setup. They are less flexible than Reactive Forms but can be easier to use for basic scenarios.
import { FormsModule } from '@angular/forms';
@NgModule({
imports: [
// other imports ...
FormsModule
],
})
export class AppModule { }Form Validation
The package provides built-in validators as well as the ability to create custom validators, making it easy to implement complex validation logic for form fields.
import { FormControl } from '@angular/forms';
let email = new FormControl('', [Validators.required, Validators.email]);Form Groups
Form Groups are used to group together multiple form controls into one object, allowing for easier management of form data and validation.
import { FormGroup, FormControl } from '@angular/forms';
let userForm = new FormGroup({
firstName: new FormControl(),
lastName: new FormControl(),
age: new FormControl()
});React Hook Form is a library for React that enables the management of forms with minimal re-renders. It is similar to @angular/forms in providing form validation and form state management, but it is designed specifically for React and uses hooks.
Formik is another popular form library for React. It simplifies the process of building, validating, and handling forms. It is comparable to @angular/forms in its functionality but is tailored to the React ecosystem.
Redux Form leverages Redux for form state management in React applications. It is similar to @angular/forms in that it handles form state and validation, but it integrates tightly with Redux for state management.
Changelog
18.0.0-next.5 (2024-04-17)
isPlatformWorkerUi and isPlatformWorkerApp have been removed without replacement, as they serve no purpose since the removal of the WebWorker platform.Angular will ensure change detection runs, even when the state update originates from outside the zone, tests may observe additional rounds of change detection compared to the previous behavior.
This change will be more likely to impact existing unit tests.
This should usually be seen as more correct and the test should be updated,
but in cases where it is too much effort to debug, the test can revert to the old behavior by adding
provideZoneChangeDetection({schedulingMode: NgZoneSchedulingMode.NgZoneOnly})
to the TestBed providers.
Similarly, applications which may want to update state outside the zone
and not trigger change detection can add
provideZoneChangeDetection({schedulingMode: NgZoneSchedulingMode.NgZoneOnly})
to the providers in bootstrapApplication or add
schedulingMode: NgZoneSchedulingMode.NgZoneOnly to the
BootstrapOptions of bootstrapModule.
Testability methods increasePendingRequestCount,
decreasePendingRequestCount and getPendingRequestCount have been
removed. This information is tracked with zones.
| Commit | Type | Description |
| -- | -- | -- |
| 3b0de30b37 | refactor | remove deprecated isPlatformWorkerApp and isPlatformWorkerUi API (#55302) |
| Commit | Type | Description | | -- | -- | -- | | 7d5bc1c628 | fix | remove container index from conditional instruction (#55190) | | 4eb0165750 | fix | remove support for unassignable expressions in two-way bindings (#55342) |
| Commit | Type | Description |
| -- | -- | -- |
| fdd560ea14 | feat | Add ability to configure zone change detection to use zoneless scheduler (#55252) |
| bce5e2344f | feat | Add build target for jsaction contract binary. (#55319) |
| f09c5a7bc4 | feat | Add zoneless change detection provider as experimental (#55329) |
| d28614b90e | feat | Modify EventType from an enum to an object. (#55323) |
| 1ee9f32621 | feat | Synchronize changes from internal JSAction codebase. (#55182) |
| de7447d15e | fix | Angular should not ignore changes that happen outside the zone (#55102) |
| 0cec9e4f9a | fix | Fix null dereference error addEvent (#55353) |
| 6534c035c0 | fix | Remove deprecated Testability methods (#53768) |
| Commit | Type | Description |
| -- | -- | -- |
| 3bc63eaaf3 | fix | avoid running CDs on controllerchange (#54222) |
<a name="17.3.5"></a>
Readme
The sources for this package are in the main Angular repo. Please file issues and pull requests against that repo.
Usage information and reference details can be found in Angular documentation.
License: MIT
FAQs
Angular - directives and services for creating forms
We found that @angular/forms demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
CISA launched a new project called Vulnrichment to enrich CVEs with details that help prioritize patching and mitigation efforts, as the NVD backlog of unenriched CVEs awaiting analysis surpasses 10,000.
Security News
Socket is joining forces with CISA and other industry leaders at the RSA Conference to sign the Secure by Design pledge, committing to uphold the highest security standards in our products.
Research
The Socket research team breaks down a sampling of malicious packages that download and execute files, among other suspicious behaviors, targeting the popular Discord platform.