tobias74

import { Component, HostBinding, Input, ViewChild } from '@angular/core';
import { AbstractControl, ControlContainer, FormGroup } from '@angular/forms';

@Component({
  template: `
      <div style="margin:20px;">
        <div style="display:inline-block; width:100px;">
          {{label}}
        </div>
        <div style="display:inline-block;">

tobias74

import { Component, ViewChild } from '@angular/core';
import { BasicInputComponent } from "./shared";
import { DummyComponentOne, DummyComponentTwo } from "./dummy.components";
import { DynamicFormComponent } from "./shared";

@Component({
  selector: 'my-app',
  template: ` 
    <h2>Dynamic Form</h2>

tobias74

export class DynamicFormComponent implements AfterViewChecked {

  @ViewChild(ComponentPlaceholderDirective) componentPlaceholder: ComponentPlaceholderDirective;
   
  ... 

  const componentFactory = this.componentFactoryResolver.resolveComponentFactory(DummyComponent);
  componentPlaceholder.viewContainerRef.clear();
  const componentRef = componentPlaceholder.viewContainerRef.createComponent(componentFactory);
  

tobias74

import { Directive, Input, ViewContainerRef } from '@angular/core';

@Directive({
  selector: '[componentPlaceholder]',
})
export class ComponentPlaceholderDirective {
  @Input()
  placeholderName: string;
  constructor(public viewContainerRef: ViewContainerRef) {}

tobias74

import {AfterViewChecked, ChangeDetectorRef, Component,
  ComponentFactoryResolver, EventEmitter, Input, QueryList,
  ViewChildren, ViewEncapsulation,
} from '@angular/core';
import { FormBuilder, FormControl, FormGroup } from '@angular/forms';
import { ComponentPlaceholderDirective } from '../directives';

@Component({
  selector: 'dynamic-form',
  template: `

tobias74

export class AppComponent  {
  @ViewChild(DynamicFormComponent) dynamicFormComponent: DynamicFormComponent;

  public shuffleComponents(){
    this.shuffleCount++;
    this.formDefinition.filter( element => !element.isFormInput).forEach( (element) => {
      element.componentInputs.myContent = "Altered Content " + this.shuffleCount;
      this.dynamicFormComponent.applyComponentInputs(element.elementName, element.componentInputs);
    });
    this.formDefinition = this.shuffle(this.formDefinition);

tobias74

export class DynamicFormComponent implements AfterViewChecked, DoCheck, OnInit {
  ...
  public applyComponentInputs(elementName, componentInputs){
      const componentInstance = this.getComponentInstanceByName(elementName);
      if (componentInstance) {
        Object.assign(componentInstance, componentInputs);
      }
    
  }
}

tobias74

this.formDefinition = [
  {
    isFormInput: true,
    isVisible: true,
    elementName: 'form_id_001',
    defaultValue: '',
    validators: [],
    componentClass: BasicInputComponent,
    componentInputs: <BasicInputComponent>{
      formControlName: 'form_id_001',

tobias74

<h2>Dynamic Form</h2>
<dynamic-form [formDefinition]="formDefinition"
              (formDataChanged)="updateFormData($event)"
              (createFormGroup)="setFormGroup($event)"
>
</dynamic-form>

tobias74

export class DynamicFormComponent implements AfterViewChecked, DoCheck, OnInit {
  ...
  ngAfterViewChecked() {
    this.updateComponentPlaceholders();
    this.updateInputStates();
    this._changeDetectionRef.detectChanges();
  }
}