I am creating a form where I get the fields from the backend. After mapping, I have something like this:
genericFilters: {
iboId: {
'display': false,
'template': ''
},
iboCode: {
'display': true,
'template': 'text_input_iboCode',
/*'template': 'text/iboCode'*/
},
iboName: {
'display': true,
'template': 'text_input_iboName'
},
iboSurname: {
'display': true,
'template': 'text_input_iboSurname'
},
iboRank: {
'display': false,
'template': 'multiselect_iboRank',
/*'template': 'select/multi_iboRank',*/
},
iboEmail: {
'display': false,
'template': 'text_input_iboEmail'
},
iboNewsletter: {
'display': true,
'template': 'simple_select_iboNewsletter',
/*'template': 'select/simple_iboNewsletter',*/
},
};
My idea behind this is to create each field type (checkbox
, multiselect
, text
, radio
, etc.) for the form field at an app level. And use the mapped JSON
above to apply a certain field type to every receieved field from the back end.
In my example, the field iboId
should have the field type <text_input_iboCode>
.
So, in my view, I don't want to have something like this:
<text_input_iboCode></text_input_iboCode>
<text_input_iboName></text_input_iboName>
<text_input_iboSurname></text_input_iboSurname>
I would actually like to have the form creation more abstract, something like this:
<div *ngFor="let field of genericFilters | dynamicTemplateProcessorPipe">
{{field.template}} <!--This should equal '<text_input_iboName>' for example-->
</div>
Questions:
Am I asking for the moon? Is this even possible? Are there other or better approaches to achieve this? Am I abusing the @Pipe
functionality?
I am actually using @Pipe
for translations, formatting, looping through objects
in templates, etc. I guessed I could also use them to return
a <fieldTemplate>
.
I will start a research to see if the usage of <ng-template #fieldTemplate>
could also be a viable option, in the meanwhile I hope someone could lay some light on the doability of this functionality with @Pipe
.
See Question&Answers more detail:
os