Angular 14 – Typed Forms and Standalone Components

MMS Founder
MMS Guy Nesher

Article originally posted on InfoQ. Visit InfoQ

Angular 14 was released earlier this month with the most significant update since Ivy. It includes two long-awaited features, Typed Reactive Forms and Standalone Components, as well as several minor improvements.

Stricly Typed Reactive Forms is a long-standing community request that can be dated to the release of Angular 2.

Until Angular 14, Reactive Forms did not include type definitions in many of its classes, and TypeScript would not catch bugs like in the following example during compilation.

const login = new FormGroup({
  email: new FormControl(''),
  password: new FormControl(''),
});

console.log(login.value.notanemail);

With Angular 14, the FormGroup, formControl, and related classes include type definitions enabling TypeScript to catch many common errors.

Migration to the new Typed Reactive Forms is not automatic.

Existing form controllers, groups, etc., will be prefixed with Untyped during the upgrade, which retains the exact type definition of previous Angular versions.

To take advantage of the new Typed Reactive Forms, developers will need to manually remove the Untyped prefix and fix any errors that may arise.

Developers can find further details in the Typed Reactive Forms documentation.

The second major change shipping with Angular 14 is the concept of Standalone Components.

Angular Modules have long been a contested subject, with many community members claiming that it leads to unnecessary complications within Angular applications.

With Angular 14, it is now possible to create standalone components by simply passing the standalone: true property in the Component decorator.

@Component({
  selector: 'sample-component',
  standalone: true,
  template: ``,
  imports: [ ComponentOne, ComponentTwo, SampleDirective,
             SampleService, CommonModule]
  ],
})
export class SampleComponent {
    ...
}

Since the Angular dependency injection is still needed, many module definitions were moved into the Component decorator.

It’s still unclear how the community will adopt this new capability, and the Angular team has flagged the feature as a developer preview, and it may change the API in future releases.

This release also includes a new extended Diagnostics framework, which provides improved feedback on template errors and best practices.

Currently, the framework includes two new warnings, one for inverse banana in a box ([]) syntax (which is valid but rarely intended) and unnecessary nullish coalescing (??) when the input is not nullable.

Finally, Angular 14 uses the latest TypeScript 4.7 and targets ES2020 by default.

For a complete list of changes, head to the official release announcement

Angular is open-source software available under the MIT license. Contributions are welcome via the Angular GitHub repository.

About the Author

Subscribe for MMS Newsletter

By signing up, you will receive updates about our latest information.

  • This field is for validation purposes and should be left unchanged.