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

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!

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.