first commit 🎉

Author: Maxime Lafarie

src/app/_components/common/dynamic-form-question/dynamic-form-question.component.html

@@ -0,0 +1,42 @@
+<div [formGroup]="form">
+  <label [attr.for]="question.key">{{ question.label }}</label>
+
+  <div [ngSwitch]="question.controlType">
+
+    <input *ngSwitchCase="'textbox'"
+           [class]="isValid ? config.validClass : config.invalidClass"
+           [formControlName]="question.key"
+           [placeholder]="question.placeholder"
+           [id]="question.key"
+           [type]="question['type']">
+
+    <select [id]="question.key"
+            *ngSwitchCase="'dropdown'"
+            [class]="isValid ? config.validClass : config.invalidClass"
+            [formControlName]="question.key">
+      <option value=""
+              disabled
+              *ngIf="!!question.placeholder"
+              selected>{{ question.placeholder }}</option>
+      <option *ngFor="let opt of question['options']"
+              [value]="opt.key">{{ opt.value }}</option>
+    </select>
+
+    <textarea *ngSwitchCase="'textarea'"
+              [formControlName]="question.key"
+              [id]="question.key"
+              [class]="isValid ? config.validClass : config.invalidClass"
+              [cols]="question['cols']"
+              [rows]="question['rows']"
+              [maxlength]="question['maxlength']"
+              [minlength]="question['minlength']"
+              [placeholder]="question.placeholder"></textarea>
+
+    <button *ngIf="question.iterable"
+            type="button"
+            (click)="addItem(question)">+</button>
+  </div>
+
+  <div class="errorMessage"
+       *ngIf="!isValid">{{ question.label }} is required</div>
+</div>

src/app/_components/common/dynamic-form-question/dynamic-form-question.component.scss

@@ -0,0 +1,3 @@
+.errorMessage{
+  color:red;
+}

src/app/_components/common/dynamic-form-question/dynamic-form-question.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DynamicFormQuestionComponent } from './dynamic-form-question.component';
+
+describe('DynamicFormQuestionComponent', () => {
+  let component: DynamicFormQuestionComponent;
+  let fixture: ComponentFixture<DynamicFormQuestionComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ DynamicFormQuestionComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DynamicFormQuestionComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/_components/common/dynamic-form-question/dynamic-form-question.component.ts

@@ -0,0 +1,33 @@
+import { Component, OnInit, Input } from '@angular/core';
+import { FormGroup, FormArray, FormControl } from '@angular/forms';
+
+import { QuestionBase, QuestionConfig } from '@app/models';
+
+@Component({
+  selector: 'app-question',
+  templateUrl: './dynamic-form-question.component.html',
+  styleUrls: ['./dynamic-form-question.component.scss']
+})
+export class DynamicFormQuestionComponent implements OnInit {
+
+  @Input() question: QuestionBase<any>;
+  @Input() form: FormGroup;
+  @Input() config: QuestionConfig;
+  get isValid() { return this.form.controls[this.question.key].valid; }
+
+  constructor() {
+  }
+
+  ngOnInit() {
+
+    if (this.question.iterable) {
+      console.log(this.question);
+    }
+  }
+
+  public addItem(question: QuestionBase<any>): void {
+    (<FormArray> this.form.get(question.key)).push(new FormControl(''));
+    console.log(question);
+  }
+
+}

src/app/_components/common/dynamic-form-question/dynamic-form-question.module.ts

@@ -0,0 +1,16 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+
+import { DynamicFormQuestionComponent } from './dynamic-form-question.component';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    ReactiveFormsModule
+  ],
+  declarations: [DynamicFormQuestionComponent],
+  exports: [DynamicFormQuestionComponent]
+})
+export class DynamicFormQuestionModule { }

src/app/_components/common/dynamic-form/dynamic-form.component.html

@@ -0,0 +1,23 @@
+<div>
+  <form (ngSubmit)="onSubmit()"
+        [formGroup]="form">
+
+    <div *ngFor="let question of questions"
+         class="form-row">
+      <app-question [question]="question"
+                    [config]="config"
+                    [form]="form"></app-question>
+    </div>
+
+    <div class="form-row">
+      <button type="submit"
+              [disabled]="!form.valid">Save</button>
+    </div>
+  </form>
+
+  <div *ngIf="payLoad"
+       class="form-row">
+    <strong>Saved the following values</strong><br>
+    <pre><code>{{ payLoad | json }}</code></pre>
+  </div>
+</div>

src/app/_components/common/dynamic-form/dynamic-form.component.scss

@@ -0,0 +1,23 @@
+// /* pre {
+//   white-space: pre-wrap;       /* css-3 */
+//   white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
+//   white-space: -pre-wrap;      /* Opera 4-6 */
+//   white-space: -o-pre-wrap;    /* Opera 7 */
+//   word-wrap: break-word;       /* Internet Explorer 5.5+ */
+//   display: block;
+//   padding: 9.5px;
+//   margin: 0 0 10px;
+//   font-size: 13px;
+//   line-height: 1.428571429;
+//   color: #333;
+//   word-break: break-all;
+//   word-wrap: break-word;
+//   background-color: #f5f5f5;
+//   border: 1px solid #ccc;
+//   border-radius: 4px;
+// }
+
+// .form-row{
+//   margin-top: 10px;
+// }
+//  */

src/app/_components/common/dynamic-form/dynamic-form.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DynamicFormComponent } from './dynamic-form.component';
+
+describe('DynamicFormComponent', () => {
+  let component: DynamicFormComponent;
+  let fixture: ComponentFixture<DynamicFormComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ DynamicFormComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DynamicFormComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/_components/common/dynamic-form/dynamic-form.component.ts

@@ -0,0 +1,31 @@
+import { Component, OnInit, Input, Inject } from '@angular/core';
+import { FormGroup } from '@angular/forms';
+
+import { QuestionBase, QuestionConfig } from '@app/models';
+import { QuestionControlService } from '@app/services';
+
+@Component({
+  selector: 'app-dynamic-form',
+  templateUrl: './dynamic-form.component.html',
+  styleUrls: ['./dynamic-form.component.scss']
+})
+export class DynamicFormComponent implements OnInit {
+
+  @Input() questions: QuestionBase<any>[] = [];
+  form: FormGroup;
+  payLoad = '';
+
+  constructor(
+    @Inject('questionConfig') public config: QuestionConfig,
+    private qcs: QuestionControlService
+  ) { }
+
+  ngOnInit() {
+    this.form = this.qcs.toFormGroup(this.questions);
+  }
+
+  onSubmit() {
+    this.payLoad = this.form.value;
+  }
+
+}

src/app/_components/common/dynamic-form/dynamic-form.module.ts

@@ -0,0 +1,48 @@
+import { NgModule, ModuleWithProviders } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ReactiveFormsModule, FormsModule } from '@angular/forms';
+
+import { DynamicFormComponent } from './dynamic-form.component';
+import { DynamicFormQuestionModule } from '../dynamic-form-question/dynamic-form-question.module';
+
+import { QuestionConfig } from '@app/models';
+import { QuestionControlService } from '@app/services';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    ReactiveFormsModule,
+    DynamicFormQuestionModule
+  ],
+  providers: [QuestionControlService],
+  declarations: [DynamicFormComponent],
+  exports: [DynamicFormComponent]
+})
+export class DynamicFormModule {
+
+  /**
+   * Use in AppModule: new instance of NgxSmartModal.
+   */
+  public static forRoot(config?: QuestionConfig): ModuleWithProviders {
+    if (!config) {
+      config = { validClass: 'valid', invalidClass: 'invalid' };
+    }
+
+    return {
+      ngModule: DynamicFormModule,
+      providers: [QuestionControlService, { provide: 'questionConfig', useValue: config }]
+    };
+  }
+
+  /**
+   * Use in features modules with lazy loading: new instance of NgxSmartModal.
+   */
+  public static forChild(): ModuleWithProviders {
+    return {
+      ngModule: DynamicFormModule,
+      providers: [QuestionControlService]
+    };
+  }
+
+}