How to create a Formgroup using an interface in Angular

Question

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

Photometry

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? – Avictor

hi @Photometry I knew it was you Jason Sapura – Bullins

Answer 1

This is an open question in Angular, the way to implement it by default will come 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!

Sprawl

hello thanks for replying, its a bummer that this is not yet implemented but thank you for the validation. i made a form using an ngFor function that reads the number of certain properties and creates the same amount of forms. i now want to create an fb.group with probably a board to match each form with a place in the border. :) – Photometry

Hey, don't forget, this solution only aplies for ANGULAR 14+!!!! – Whitton

Answer 2

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.

Kulun

Answer 3

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([])
});

Barozzi