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
| <app-dynamic-form></app-dynamic-form> |
| <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; |
| <app-dynamic-form [formData]="data"></app-dynamic-form> |
| // 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', |