camilogiraldo

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule} from '@angular/forms';

import { AppComponent } from './app.component';
import { DynamicFormComponent } from './components/dynamic-form/dynamic-form.component';

@NgModule({
  declarations: [
    AppComponent,

camilogiraldo

import { Component, OnInit } from '@angular/core';
import { FormGroup } from '@angular/forms';
import { FormData } from './../../shared/interface/form-data';

@Component({
  selector: 'app-dynamic-form',
  templateUrl: './dynamic-form.component.html',
  styleUrls: ['./dynamic-form.component.scss']
})
export class DynamicFormComponent implements OnInit {

camilogiraldo

<form [formGroup]="form">
  
</form>

camilogiraldo

// Create this file under app/shared/mock/mock-data.ts

import { FormData } from './../interface/form-data';

export const MockForm: FormData[] = [
  {
    controlName: 'Username',
    controlType: 'text',
    valueType: 'text',
    placeholder: 'Enter username',

camilogiraldo

<app-dynamic-form [formData]="data"></app-dynamic-form>

camilogiraldo

import { MockForm } from './shared/mock/mock-form';
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent {
  data = MockForm;

camilogiraldo

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

@Component({
  selector: 'app-dynamic-form',
  templateUrl: './dynamic-form.component.html',
  styleUrls: ['./dynamic-form.component.scss']
})
export class DynamicFormComponent implements OnInit {
  form: FormGroup;

camilogiraldo

import { FormData } from './../../shared/interface/form-data';
import { Component, OnInit, Input } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';

@Component({
  selector: 'app-dynamic-form',
  templateUrl: './dynamic-form.component.html',
  styleUrls: ['./dynamic-form.component.scss']
})
export class DynamicFormComponent implements OnInit {

camilogiraldo

<form [formGroup]="form" (submit)="submitForm()">

  <ng-template ngFor let-input [ngForOf]="formData">
    <ng-container [ngSwitch]="input.controlType">
    
      <!-- here we will be dynamically creating our form fields-->
   
    </ng-container>
  </ng-template>

camilogiraldo

<form [formGroup]="form" (submit)="submitForm()">

  <ng-template ngFor let-input [ngForOf]="formData">
    <ng-container [ngSwitch]="input.controlType">
    
      <!-- handling text type inputs -->
       <ng-template [ngSwitchCase]="'text'">
        <div class="form-group">
          
          <label [for]="input.controlName"> {{input.controlName}}</label>