I am following https://angular.io/docs/ts/latest/cookbook/dynamic-form.html guide to implement dynamic forms.
I now have a dynamic form component which takes formModel and form group as an input:
mycomponent.html
<dynamic-form [form]="form"
[formModel]="formModel">
</dynamic-form>
My dynamic-form component loops through the formModel and render df-control component that renders specific control depending on the settings defined for that control in form model:
dynamic-form.component.html
<form [formGroup]="form" (ngSubmit)="onSubmitForm()">
<div *ngFor="let controlModel of formModel" class="form-row">
<df-control [controlModel]="controlModel" [form]="form" [formModel]="formModel">
</df-control>
</div>
<div class="form-group">
<button type="submit">Save</button>
<button type="button" (click)="onCancel()">Cancel</button>
</div>
</form>
For some of the form fields defined in my formModel I do not want it to be rendered through df-control. Instead, I want to be able to specify templates for such controls between dynamic-form tags. And want the appropriate template to be rendered when looping through formModel
For example if I have a form with 6 fields:
<dynamic-form [form]="form" [formModel]="formModel">
<template [modelId]="'field3'">
<p>my custom template for field 3</p>
</template>
<template [modelId]="'field5'">
<p>my custom template for field 5</p>
</template>
</dynamic-form>
I want all fields to be rendered in normal way exceped field3 and field5. For field3 and field5 I do not want to render df-control but instead I want appropriate template to be rendered
i.e. for field3:
<template [modelId]="'field3'">
<p>my custom template for field 3</p>
</template>
and for field5:
<template [modelId]="'field5'">
<p>my custom template for field 5</p>
</template>
Can anyone please guide how to achieve this?
I have found this which seems near to what I am looking for but its not very clear.
https://stackoverflow.com/a/37229495/2755616
Any help would be really appreciated.