I Angular version 14 er typesikre forms endeligt blevet en realitet. Jeg må indrømme at selvom jeg er en stor fan af Angular så er det helt vildt at det skulle tage så lang tid. Angular 2 blev releaset maj 2016 og (nærmest) tvang alle Angular-udviklere til at konvertere til Typescript. Når man tager i betragtning at de fleste web applikationers vigtigste element er formen, så var det problematisk at Angular på dette område ikke understøttede Typescripts vigtigste formål. Man har således i seks år skulle leve med ikke at kunne få den struktur hvormed brugeren giver input til applikationen foræret fra de typer man får fra sit REST API. Eneste undskyldning må være at man har villet afvente Ivy, som har været noget sværere at færdiggøre end først antaget.

Nå men her følger en kortfattet opsummering af hvad man skal være opmærksom på i forhold til forms, f.eks. når man opgraderer en eksisterende applikation til Angular 14.

Deklarering

Do’s

1. Initier formen udfra formbuilder.group hvis FormBuilder er injected via constructor
2. Initier formen med New FormGroup({...}) hvis IKKE FormBuilder er injected via constructor

Don’ts

• Deklarer ikke formen som værende af typen FormGroup (med mindre du supplerer med tip nedenfor)
  • Dvs. skriv ikke public form: FormGroup;

Tips

Netanel Basel har i artikkel vist at følgende type kan skabe bindeleddet mellem en predefineret type og en form:

export type ControlsOf> = {
[K in keyof T]: T[K] extends Record
? FormGroup>
: FormControl;
};

Man kan så deklarere og initiere sin form således:

formGroup = new FormGroup<ControlsOf<MinType>>({ …

Bobby Galli kalder det man dermed opnår for en Super Form

Obs duer kun for simple typer

Typer med Arrays i fungerer ikke med ControlsOf. Basel har forsøgt at fikse dette i NgNeat , men jeg har ikke testet dette. Jeg må indrømme at det gør mig lidt træt at Angular-teamet ikke har kunnet komme op med en ordentlig løsning på dette. Jeg sidder igen med en følelse af at den oplagte use-case nemlig at den struktur hvormed brugeren giver input til applikationen kan fås foræret fra de typer man får fra sit REST API – ja den er stadig kun delvist understøttet.

Dynamiske samlinger af kontroller

Der er situationer hvor man ønsker at brugeren kan tilføje felter til formen dynamisk. Et eksempel kunne være at brugeren skal kunne tilføje emneord til en kommentar. Man ved i den situation ikke hvor mange emneord brugeren ønsker at tilføje og et array vil derfor være en naturlig ‘beholder’.

I tidligere version af Angular har man kunnet benytte FormArray til denne use case. Her har man skullet være opmærksom på blandt andet at bruge FormArrayName og endvidere at lave en getter til den attribut der af typen FormArray.

Nu vil jeg prøve at undersøge om dette er blevet lettere i Angular 14. … more to follow

FormRecord

FormRecord er en nyhed introduceret i Angular 14.