I'm new to asking questions so please be understanding. I have and interface of USERS

interface USERS {
  id: Number;
  name: String;
  username: String;
  email: String;
}

and I want to create a formbuilder that (if possible) will automatically make the properties that are needed. eg

registrationForm = this.fb.group({
    userName: ['', [Validators.required, Validators.minLength(3), forbiddenNameValidator]], 
    id: [''], 
    name: [''], 
    email: [''], 

Is there any way that this can happen ? I want to create larger interface and I don't want to manually put the necessary properties

I'm new to asking questions so please be understanding. I have and interface of USERS

interface USERS {
  id: Number;
  name: String;
  username: String;
  email: String;
}

and I want to create a formbuilder that (if possible) will automatically make the properties that are needed. eg

registrationForm = this.fb.group({
    userName: ['', [Validators.required, Validators.minLength(3), forbiddenNameValidator]], 
    id: [''], 
    name: [''], 
    email: [''], 

Is there any way that this can happen ? I want to create larger interface and I don't want to manually put the necessary properties

• javascript
• angular
• dynamic

• What did you mean by creating formbuilder? There is already a formbuilder in angular. Do you want make something of your own something like formbuilder? which will work just by passing the interface to it? – Ekhlas Mridha Commented Apr 12, 2022 at 22:50
• hi @jason I knew it was you Jason Sapura – Fai Zal Dong Commented Jun 18, 2024 at 9:16

3 Answers 3

This is an open question in Angular, the way to implement it by default will e in the future. For now what we can do to validate the form is:

export type IForm<T> = {
    [K in keyof T]?: any;
}

interface User {
  readonly id: number;
  readonly name: string;
  readonly username: string;
  readonly email: string;
}

var form: IForm<User> = {
    id: [''], 
    name: [''], 
    username: [''], 
    email: [''],
};
this.form = this.fb.group(form);

With this implementation it will at least throw you an error when the interface and form don't match. Saludos!

This is how I type my form groups atm:

interface UserAddress {
  address: string
  city: string
  postalCode: string
}

interface UserForm {
  firstName: FormControl<string>
  lastName: FormControl<string>
  userAddresses: FormControl<UserAddress[]>
}

userForm = new FormGroup<UserForm>({
  firstName: new FormControl('', {validators: [Validators.required]}),
  lastName: new FormControl('', {validators: [Validators.required]}),
  userAddresses: new FormControl([])
})

I think I don't need to explain this and I think this is currently best way to use typed forms in Angular, correct me if I'm wrong.

You should be able to do something like this:

import {FormControl} from '@angular/forms';

export interface User {
  firstName: string;
  lastName: string;
  addresses: string[];
}

type ToFormControls<T> = {
  [K in keyof T]: FormControl<T[K]>;
};

export type UserForm = ToFormControls<User>;

const userForm = new FormGroup<UserForm>({
  firstName: new FormControl('', {validators: [Validators.required]}),
  lastName: new FormControl('', {validators: [Validators.required]}),
  addresses: new FormControl([])
});