How to Build a Strongly Typed Angular 14 Super Form

shirt.component.ts

import { Component, EventEmitter, Output } from '@angular/core';
import { FormControl, FormGroup } from '@angular/forms';
import { Item } from '../cart/item';
import { Shirt, Color, Size } from './shirt';

@Component({
  selector: 'app-shirt',
  templateUrl: './shirt.component.html',
  styleUrls: ['./shirt.component.css'],
})
export class ShirtComponent {
  @Output() addShirtToCartRequested = new EventEmitter<Item<Shirt>>();

  formGroup = new FormGroup({
    quantity: new FormControl(1),
    item: new FormGroup({
      color: new FormControl(Color.Green),
      size: new FormControl(Size.medium),
      text: new FormControl('hello world 🌎'),
    }),
  });

  onSubmit(): void {
    this.addShirtToCartRequested.emit(this.formGroup.getRawValue());
  }
}

shirt.ts

export interface Item<T> {
  item: T;
  quantity: number;
}

export interface Shirt {
  text: string;
  color: Color;
  size: Size;
}

export enum Color {
  Red = 'Red',
  Blue = 'Blue',
  Green = 'Green',
  Yellow = 'Yellow',
  Pink = 'Pink',
}

export enum Size {
  xs = 'XS',
  small = 'S',
  medium = 'M',
  large = 'L',
  xl = 'XL',
  xxl = 'XXL',
}