Typescript generic angular forms with optional properties

Question

Give the following, how can I make my optional properties be optional inside the FormBuilder?

export type TypedFormControls<T extends Record<any, any>> = {
  [K in keyof T]-?: T[K] extends Array<infer R>
    ? FormArray<
        R extends Record<any, any>
          ? FormGroup<TypedFormControls<R>>
          : FormControl<R>
      >
    : T[K] extends Record<any, any>
    ? FormGroup<TypedFormControls<T[K]>>
    : FormControl<T[K]>;
};

Here are my models

export class UserModel {
  email: string;
  age?: number;
  information?: Information;
}

export class Information {
  id: number;
  name: string;
  gender?: string;
}

And finally the form group

this.formGroup = this._formBuilder.group<TypedFormControls<UserModel>>({
      email: this._formBuilder.control('email@email'),
      // age: this._formBuilder.control(25),
      information: this._formBuilder.group<TypedFormControls<Information>>({
        // gender: this._formBuilder.control('male'),
        id: this._formBuilder.control(1),
        name: this._formBuilder.control('John'),
      }),
    });

Here is the stackblitz

I would avoid using a formBuilder at all, and just build the form up manually, and not assign validators.required to those optional controls. — FunkMonkey33
– FunkMonkey33, Commented Sep 12, 2023 at 14:55

FunkMonkey33 · Accepted Answer · 2023-09-12 15:17:04Z

0

https://stackblitz.com/edit/angular-ivy-fqjstc?file=src%2Fapp%2Fapp.component.ts

import { Component, OnInit } from '@angular/core';
import { FormArray, FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';

export type TypedFormControls<T extends Record<any, any>> = {
  [K in keyof T]-?: T[K] extends Array<infer R>
    ? FormArray<
        R extends Record<any, any>
          ? FormGroup<TypedFormControls<R>>
          : FormControl<R>
      >
    : T[K] extends Record<any, any>
    ? FormGroup<TypedFormControls<T[K]>>
    : FormControl<T[K]>;
};

export class UserModel {
  email: string;
  age: number | null;
  information: Information | null;
}

export class Information {
  id: number;
  name: string;
  gender: string | null;
}

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
})
export class AppComponent implements OnInit {
  formGroup: FormGroup;

  constructor(private readonly _formBuilder: FormBuilder) {}

  ngOnInit(): void {

    this.formGroup = this._formBuilder.group<TypedFormControls<UserModel>>({
      email: this._formBuilder.control('email@email'),
      age: this._formBuilder.control(25),
      information: this._formBuilder.group<TypedFormControls<Information>>({
        gender: this._formBuilder.control('male'),
        id: this._formBuilder.control(1),
        name: this._formBuilder.control('John'),
      }),
    });
  }
}

answered Sep 12, 2023 at 15:17

FunkMonkey33

2,2663 gold badges21 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

FunkMonkey33 Over a year ago

I redefined your nullable types with | null.

Paul Over a year ago

But the idea is to have those nullable properties be optional inside the formbuilder - the TypeFormControls needs some reworking, I just don't know how to rework it to allow for optional properties.

FunkMonkey33 Over a year ago

A property defined as string | null is a nullable property. It can take either a string or null. If your problem is validation, then just don't use a FormBuilder, but build it up yourself. Honestly I think it's easier than a form builder. Then don't add Validators.required to the properties that aren't required.

Paul · Accepted Answer · 2023-10-03 18:24:32Z

0

I just realized that the initial example is making all properties required, so instead of [K in keyof T]-? if I use [K in keyof T] the optional properties remain which is exactly the result I am looking for.

answered Oct 3, 2023 at 18:24

Paul

1194 silver badges16 bronze badges

Collectives™ on Stack Overflow

Typescript generic angular forms with optional properties

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related