javascriptangulardynamic

How to create a Formgroup using an interface in Angular


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


Solution

  • 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!