Angular DynamicFormComponent not Displaying Form Fields

Question

I'm trying to create a dynamic form using Angular where I can pass a model class to a custom DynamicFormComponent and have it generate the form fields based on the class properties. However, I'm facing an issue where the form fields are not being displayed when using the DynamicFormComponent.

Here's my code setup:

dynamic-form.component.ts:

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

@Component({
  selector: 'app-dynamic-form',
  template: '', 
})
export class DynamicFormComponent implements OnInit {
  @Input() modelClass: any;
  form: FormGroup;

  constructor(private fb: FormBuilder) {}

  ngOnInit() {
    const modelInstance = new this.modelClass();
    const formControlsConfig: Record<string, any> = {};

    Object.keys(modelInstance).forEach((key) => {
      formControlsConfig[key] = new FormControl();
    });

    this.form = this.fb.group(formControlsConfig);
  }

  onSubmit() {
    if (this.form.valid) {
      const modelInstance = new this.modelClass();
      Object.assign(modelInstance, this.form.value);
      console.log(modelInstance);
    }
  }
}

app.component.html:

<h1>Dynamic Form Example</h1>
<app-dynamic-form [modelClass]="'Person'"></app-dynamic-form>

app.module.ts:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ReactiveFormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { DynamicFormComponent } from './dynamic-form/dynamic-form.component';
import { Person } from './person.model'; 

@NgModule({
  declarations: [AppComponent, DynamicFormComponent],
  imports: [BrowserModule, ReactiveFormsModule],
  bootstrap: [AppComponent],
})
export class AppModule {}

The problem is that when I use the DynamicFormComponent in my template, it renders the component correctly but not showing the form fields. I've double-checked my code, reviewed dependencies, and tried different approaches, but I can't seem to identify what's causing the issue.

Can anyone help me understand why the form fields are not being displayed using the DynamicFormComponent? Any insights or suggestions would be greatly appreciated.

Answer 1

You didn't share the app.component.ts code, but let's assume it's something like this:

@Component({
 templateUrl: './app.component.html'
})
export class AppComponent {
  person: Person;

  constructor () {
     this.person = new Person();

     this.person.firstName = 'John';
     this.person.lastName = 'Doe';
  }
}

The HTML code of the AppComponent class:

<h1>Dynamic Form Example</h1>
<app-dynamic-form [modelClass]="person"></app-dynamic-form>

The key here is the [modelClass]="person" part in the HTML code. When you use square brackets when passing a value for an angular custom component input property, that means that the value you pass to it is a Typescript/JavaScript expression (e.g. component property). So in this example, we are passing the person property value of the AppComponent.

You issue was that you passed "'Person'" which means you passed the 'Person' text to the modelClass property because 'Person' is a string literal. You have to remove the single quotes inside the double quotes to pass an expression.