build form from formConfig array

Author: Laoujin

JavaScript/impl-angular/src/app/app.component.html

@@ -4,7 +4,18 @@
   </nav>
 
   <div class="container">
-    <form>
+    <form *ngIf="true">
+      <div *ngFor="let config of formConfig" [ngSwitch]="config.type">
+        <app-email *ngSwitchCase="'email'" [config]="config"></app-email>
+        <app-secret *ngSwitchCase="'secret'" [config]="config"></app-secret>
+        <app-toggle *ngSwitchCase="'toggle'" [config]="config"></app-toggle>
+        <app-submit *ngSwitchCase="'submit'" [config]="config"></app-submit>
+      </div>
+    </form>
+
+
+
+    <form *ngIf="false">
       <div class="form-group">
         <label>Email</label>
         <input type="email" class="form-control" />

JavaScript/impl-angular/src/app/app.module.ts

@@ -2,13 +2,15 @@ import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
 
 import { AppComponent } from './app.component';
+import * as Controls from './controls';
 
 @NgModule({
   declarations: [
-    AppComponent
+    AppComponent,
+    ...Object.values(Controls),
   ],
   imports: [
-    BrowserModule
+    BrowserModule,
   ],
   providers: [],
   bootstrap: [AppComponent]

JavaScript/impl-angular/src/app/controls/index.ts

@@ -0,0 +1,52 @@
+import { Component, Input } from '@angular/core';
+
+@Component({
+  selector: 'app-email',
+  template: `
+    <div class="form-group">
+      <label>{{ config.label }}</label>
+      <input type="email" class="form-control" />
+    </div>
+`})
+export class EmailComponent {
+  @Input() config: any;
+}
+
+
+
+@Component({
+  selector: 'app-secret',
+  template: `
+    <div class="form-group">
+      <label>{{ config.label }}</label>
+      <input type="password" class="form-control" />
+    </div>
+`})
+export class SecretComponent {
+  @Input() config: any;
+}
+
+
+
+@Component({
+  selector: 'app-toggle',
+  template: `
+    <div class="form-group form-check">
+      <input type="checkbox" class="form-check-input" />
+      <label class="form-check-label">{{ config.label }}</label>
+    </div>
+`})
+export class ToggleComponent {
+  @Input() config: any;
+}
+
+
+
+@Component({
+  selector: 'app-submit',
+  template: `
+    <button type="submit" class="btn btn-primary">{{ config.label }}</button>
+`})
+export class SubmitComponent {
+  @Input() config: any;
+}

JavaScript/impl-react/src/Components/App.js

@@ -1,6 +1,7 @@
 import React, { Component } from 'react';
 import './App.css';
 import { formConfig } from '../FormBuilder/formConfig.js';
+import * as Controls from './controls';
 
 export class App extends Component {
   render() {
@@ -11,7 +12,18 @@ export class App extends Component {
         </nav>
 
         <div className="container">
-          <form>
+          {formConfig.map((config, index) => {
+            switch (config.type) {
+            case 'email': return <Controls.Email key={index} config={config} />;
+            case 'secret': return <Controls.Secret key={index} config={config} />;
+            case 'toggle': return <Controls.Toggle key={index} config={config} />;
+            case 'submit': return <Controls.Submit key={index} config={config} />;
+            default: return null;
+            }
+          })}
+
+
+          {/*<form>
             <div className="form-group">
               <label>Email</label>
               <input type="email" className="form-control" />
@@ -25,7 +37,7 @@ export class App extends Component {
               <label className="form-check-label">Remain logged in</label>
             </div>
             <button type="submit" className="btn btn-primary">Login</button>
-          </form>
+          </form>*/}
         </div>
       </div>
     );

JavaScript/impl-react/src/Components/controls/index.js

@@ -0,0 +1,47 @@
+import React, { Component } from 'react';
+
+export class Email extends Component {
+  render() {
+    const {config} = this.props;
+    return (
+      <div className="form-group">
+        <label>{config.label}</label>
+        <input type="email" className="form-control" />
+      </div>
+    );
+  }
+}
+
+export class Secret extends Component {
+  render() {
+    const {config} = this.props;
+    return (
+      <div className="form-group">
+        <label>{config.label}</label>
+        <input type="password" className="form-control" />
+      </div>
+    );
+  }
+}
+
+export class Toggle extends Component {
+  render() {
+    const {config} = this.props;
+    return (
+      <div className="form-group form-check">
+        <input type="checkbox" className="form-check-input" />
+        <label className="form-check-label">{config.label}</label>
+      </div>
+    );
+  }
+}
+
+
+export class Submit extends Component {
+  render() {
+    const {config} = this.props;
+    return (
+      <button type="submit" className="btn btn-primary">{config.label}</button>
+    );
+  }
+}