@angular/forms

What is @angular/forms?

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.

What are @angular/forms's main functionalities?

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()
});

Other packages similar to @angular/forms

react-hook-form

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

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

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.

README

Angular

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

Changelog

19.0.0-next.0 (2024-08-14)

Breaking Changes

core

• Errors that are thrown during ApplicationRef.tick will now be rethrown when using TestBed. These errors should be resolved by ensuring the test environment is set up correctly to complete change detection successfully. There are two alternatives to catch the errors:

  • Instead of waiting for automatic change detection to happen, trigger it synchronously and expect the error. For example, a jasmine test could write expect(() => TestBed.inject(ApplicationRef).tick()).toThrow()
  • TestBed will reject any outstanding ComponentFixture.whenStable promises. A jasmine test, for example, could write expectAsync(fixture.whenStable()).toBeRejected().

  As a last resort, you can configure errors to not be rethrown by setting rethrowApplicationErrors to false in TestBed.configureTestingModule.

router

• The Router.errorHandler property has been removed. Adding an error handler should be configured in either withNavigationErrorHandler with provideRouter or the errorHandler property in the extra options of RouterModule.forRoot. In addition, the error handler cannot be used to change the return value of the router navigation promise or prevent it from rejecting. Instead, if you want to prevent the promise from rejecting, use resolveNavigationPromiseOnError.
• The return type of the Resolve interface now includes RedirectCommand.

core

| Commit | Type | Description | | -- | -- | -- | | 468d3fb9b1 | fix | rethrow errors during ApplicationRef.tick in TestBed (#57200) |

router

| Commit | Type | Description | | -- | -- | -- | | f271021e19 | feat | Add routerOutletData input to RouterOutlet directive (#57051) | | b2790813a6 | fix | Align RouterModule.forRoot errorHandler with provider error handler (#57050) | | 7436d3180e | fix | Update Resolve interface to include RedirectCommand like ResolveFn (#57309) |

<!-- CHANGELOG SPLIT MARKER -->

<a name="18.2.0"></a>