How to get form values from dynamic HTML In angular2
<p>I am new to angular 2 and I am struggling to get the values from Dynamic HTML. My requirement is I will have some Form Input and I need to inject Dynamic HTML in between which will contain some more inputs.</p>

<p>I have used the example from @Rene Hamburger and created the Dynamic Form Input.</p>

<p>If you look into the example It has 3 Inputs 2 in the Template (Name, LastName). I am injecting the address using addcomponent.</p>

<p>I am using Form Builder to build all the 3 controls, but when you click submit you could see the values Name &amp; Last Name shows up, but could not get the values of address.</p>

<p>I am not now sure how to get the values. I am requesting the community gurus to help me out.</p>

<p><a href="http://plnkr.co/edit/fcS1hdfLErjgChcFsRiX?p=preview" rel="nofollow noreferrer">http://plnkr.co/edit/fcS1hdfLErjgChcFsRiX?p=preview</a></p>

<p><strong>app/app.component.ts</strong></p>

<pre><code>import {AfterViewInit,OnInit, Compiler, Component, NgModule, ViewChild,
  ViewContainerRef} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'
import { FormGroup, FormControl, FormArray, FormBuilder, Validators } from '@angular/forms';
import { DomSanitizer, SafeHtml } from "@angular/platform-browser";

@Component({
  selector: 'my-app',
  template: `
    &lt;h1&gt;Dynamic template:&lt;/h1&gt;

    &lt;form [formGroup]="myForm" (ngSubmit)="onSubmit()"&gt;
     &lt;div  class="form-row"&gt;
      &lt;label for=""&gt;Name&lt;/label&gt;
      &lt;input type="text" class="form-control" formControlName="name"&gt;
            &lt;small [hidden]="myForm.controls.name.valid || (myForm.controls.name.pristine &amp;&amp; !submitted)" class="text-danger"&gt;
            Name is required (minimum 5 characters).
          &lt;/small&gt;
    &lt;/div&gt;

        &lt;div  class="form-row"&gt;
      &lt;label for=""&gt;Last Name&lt;/label&gt;
      &lt;input type="text" class="form-control" formControlName="lastname"&gt;
            &lt;small [hidden]="myForm.controls.name.valid || (myForm.controls.name.pristine &amp;&amp; !submitted)" class="text-danger"&gt;
            Name is required (minimum 5 characters).
          &lt;/small&gt;
    &lt;/div&gt;

       &lt;div #container&gt;&lt;/div&gt;

      &lt;div class="form-row"&gt;
      &lt;button type="submit"&gt;Submit&lt;/button&gt;
      &lt;/div&gt;
       &lt;div *ngIf="payLoad" class="form-row"&gt;
            &lt;strong&gt;Saved the following values&lt;/strong&gt;&lt;br&gt;{{payLoad}}
        &lt;/div&gt;


    &lt;/form&gt;
  `,
})
export class AppComponent implements OnInit , AfterViewInit {
  @ViewChild('container', { read: ViewContainerRef }) container: ViewContainerRef;
  public myForm: FormGroup; // our model driven form
  public payLoad: string;

    public onSubmit() {
        this.payLoad = JSON.stringify(this.myForm.value);
    }

  constructor(private compiler: Compiler,private formBuilder: FormBuilder,private sanitizer: DomSanitizer) {}

ngOnInit() {
      this.myForm = this.formBuilder.group({
            name: ['', [&lt;any&gt;Validators.required, &lt;any&gt;Validators.minLength(5)]],
            lastname: ['', [&lt;any&gt;Validators.required, &lt;any&gt;Validators.minLength(5)]],
            address: ['', [&lt;any&gt;Validators.required, &lt;any&gt;Validators.minLength(5)]]
            });
}
  ngAfterViewInit() {

    this.addComponent('&lt;div  class="form-row"&gt; &lt;label for=""&gt;Address&lt;/label&gt; &lt;input type="text" class="form-control" formControlName="address"&gt;  &lt;/div&gt;');
  }

  private addComponent(template: string) {
    @Component({template: template})
    class TemplateComponent {}

    @NgModule({declarations: [TemplateComponent]})
    class TemplateModule {}

    const mod = this.compiler.compileModuleAndAllComponentsSync(TemplateModule);
    const factory = mod.componentFactories.find((comp) =&gt;
      comp.componentType === TemplateComponent
    );
    const component = this.container.createComponent(factory);
  }
}
</code></pre>

<hr>

<p>The Plunker does not work, so I added the example in stackbliz.</p>

<p><a href="https://stackblitz.com/edit/angular-t3mmg6" rel="nofollow noreferrer">https://stackblitz.com/edit/angular-t3mmg6</a></p>

<p>This example is dynamic Form controls is in add component (This is where you can get the Formcontrols from the server). If you see addcomponent method you can see the Forms Controls. In this example I am not using angular material,but It works (I am using @ work). This is target to angular 6, but works in all previous version.</p>

<p>Need to add JITComplierFactory for AngularVersion 5 and above.</p>

<p>Thanks</p>

<p>Vijay</p>