Camilo Giraldo camilogiraldo

For those wondering on how to tackle this issue in angular 2, using the solution purposed here: https://gist.github.com/tushargupta51/5fa6d000357120adbc8fd1d5c68853c4#gistcomment-2596636 It's as simple as this

After creating the redirect.html

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
 Frame Redirect

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

	<ng-template ngFor let-input [ngForOf]="formData">
	<ng-container [ngSwitch]="input.controlType">

	<ng-template [ngSwitchCase]="'text'">
	<div class="form-group">
	<label [for]="input.controlName"> {{input.controlName}}</label>
	<input [formControlName]="input.controlName" [type]="input.valueType" [name]="input.controlName"
	[required]="input.validators.required" [minlength]="input.validators.minlength"

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

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

	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 {

	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;

	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;

	// 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',