Angular 14: formularios escritos y componentes independientes

Angular 14 se lanzó a principios de este mes con la actualización más importante desde Ivy. Incluye dos funciones muy esperadas, formularios reactivos tipeados y componentes independientes, así como varias mejoras menores.

Stricly Typed Reactive Forms es una solicitud de la comunidad de larga data que se puede fechar en el lanzamiento de Angular 2.

Hasta Angular 14, Reactive Forms no incluía definiciones de tipo en muchas de sus clases, y TypeScript no detectaría errores como en el siguiente ejemplo durante la compilación.


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

console.log(login.value.notanemail);

Con Angular 14, FormGroup, formControl y las clases relacionadas incluyen definiciones de tipos que permiten a TypeScript detectar muchos errores comunes.

La migración a los nuevos formularios reactivos tipeados no es automática.

Los controladores de formulario, grupos, etc. existentes tendrán el prefijo Sin tipo durante la actualización, que conserva la definición de tipo exacta de las versiones anteriores de Angular.

Para aprovechar los nuevos formularios reactivos con tipo, los desarrolladores deberán eliminar manualmente el prefijo sin tipo y corregir cualquier error que pueda surgir.

Los desarrolladores pueden encontrar más detalles en la documentación de Formularios reactivos tipeados .

El segundo cambio importante que se incluye con Angular 14 es el concepto de componentes independientes.

Los módulos angulares han sido durante mucho tiempo un tema controvertido, y muchos miembros de la comunidad afirman que genera complicaciones innecesarias dentro de las aplicaciones angulares.

Con Angular 14, ahora es posible crear componentes independientes simplemente pasando la propiedad standalone: ​​true en el decorador de componentes.


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

Dado que aún se necesita la inyección de dependencia angular, muchas definiciones de módulos se trasladaron al decorador de componentes.

Todavía no está claro cómo la comunidad adoptará esta nueva capacidad, y el equipo de Angular ha marcado la función como una vista previa para desarrolladores, y puede cambiar la API en versiones futuras.

Esta versión también incluye un nuevo marco de Diagnóstico extendido , que proporciona comentarios mejorados sobre errores de plantilla y mejores prácticas.

Actualmente, el marco incluye dos nuevas advertencias, una para la sintaxis de plátano inverso en un cuadro ([]) (que es válida pero rara vez intencionada) y la fusión nula innecesaria (??) cuando la entrada no es anulable.

Finalmente, Angular 14 usa el último TypeScript 4.7 y tiene como objetivo ES2020 de forma predeterminada.

Para obtener una lista completa de cambios, diríjase al anuncio de lanzamiento oficial .

Angular es un software de código abierto disponible bajo la licencia MIT. Las contribuciones son bienvenidas a través del repositorio Angular GitHub .