As a beginner in Angular 2, I am facing challenges extracting values from Dynamic HTML. My task involves having some Form Inputs and injecting Dynamic HTML within them that contain additional inputs.
I followed the example by @Rene Hamburger to create the Dynamic Form Input.
The example consists of 3 Inputs - 2 in the Template (Name, LastName). I then inject the address using 'addcomponent'.
While I use Form Builder to construct all 3 controls, upon submitting, only the values of Name & Last Name are displayed, while the address values remain elusive.
I am unsure how to retrieve these address values and seek assistance from the community experts.
http://plnkr.co/edit/fcS1hdfLErjgChcFsRiX?p=preview
app/app.component.ts
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: `
<h1>Dynamic template:</h1>
<form [formGroup]="myForm" (ngSubmit)="onSubmit()">
<div class="form-row">
<label for="">Name</label>
<input type="text" class="form-control" formControlName="name">
<small [hidden]="myForm.controls.name.valid || (myForm.controls.name.pristine && !submitted)" class="text-danger">
Name is required (minimum 5 characters).
</small>
</div>
<div class="form-row">
<label for="">Last Name</label>
<input type="text" class="form-control" formControlName="lastname">
<small [hidden]="myForm.controls.name.valid || (myForm.controls.name.pristine && !submitted)" class="text-danger">
Name is required (minimum 5 characters).
</small>
</div>
<div #container></div>
<div class="form-row">
<button type="submit">Submit</button>
</div>
<div *ngIf="payLoad" class="form-row">
<strong>Saved the following values</strong><br>{{payLoad}}
</div>
</form>
`,
})
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: ['', [<any>Validators.required, <any>Validators.minLength(5)]],
lastname: ['', [<any>Validators.required, <any>Validators.minLength(5)]],
address: ['', [<any>Validators.required, <any>Validators.minLength(5)]]
});
}
ngAfterViewInit() {
this.addComponent('<div class="form-row"> <label for="">Address</label> <input type="text" class="form-control" formControlName="address"> </div>');
}
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) =>
comp.componentType === TemplateComponent
);
const component = this.container.createComponent(factory);
}
}
Since the Plunker link is not functional, I have added the example on stackblitz.
https://stackblitz.com/edit/angular-t3mmg6
This dynamic Form controls example in the 'addcomponent' method allows you to fetch Form controls from the server. By examining the 'addcomponent' method, you can observe the Form Controls being utilized. While this example does not involve angular material, it still functions effectively. It targets Angular 6 but also works seamlessly in previous versions.
JITComplierFactory needs to be added for Angular Version 5 and above.
Thank you,
Vijay