0

I'm working on a site with a bunch of form elements that are inserted dynamically from a hard-coded list myFormElements:ElementBase. Each element has a string label, and now I need to make these labels clickable to open a new tab (to an external URL). Ideally I'd like to modify ElementBase to make it clickable somehow, is there way to do this? If not what is the best workaround?

<ng-container
  myDynamicField
  [field]="myFormElements[0]"
  [group]="myForm"
  ...
>
</ng-container>

export const myFormElements:ElementBase = [
  {
    id: "some id",
    label: 'some label',
    type: 'text',
    dataType: 'String',
    ...
  },
...
]

export interface ElementBase {
  id: string,
  label?: string,
  type?: string,
  dataType?: string,
  ...
}
mana
  • 21
  • 6
  • I think something will have to change in myDynamicField to make that work? – MikeOne Oct 21 '21 at 18:53
  • So you want to convert label element to link? To where should this new tab lead? – Justinas Oct 21 '21 at 19:39
  • To an external URL (edited post) – mana Oct 21 '21 at 19:40
  • Unless I'm missing something, why would you want to change anything in the interface? I'd imagine that you would wrap the label of the html element in on the component level (not sure what `[field]` is doing with the objects passed). Unless you add in an additional key value pair to represent the url but you would still need to handle the wrapping of the label in an anchor tag and add the `href` attribute, or handle the click event with an onClick handler. – UncaughtTypeError Oct 21 '21 at 21:11
  • Mostly because the list of myFormElements is very long and lot of components are hard-coded this way, so changing the html would be a lot of work. The url is generated based on the id, so ideally I want to change the template instead of wrapping each label individually – mana Oct 21 '21 at 21:20
  • Is the template not dynamically generated with the object properties passed? So when it comes to generating and outputting the label, could you not add additional logic to check whether it should be a link then update the output accordingly? Can you show us more of this part of the logic? What is `myDynamicField` doing with `myFormElements[0]`? – UncaughtTypeError Oct 21 '21 at 21:32
  • Right now it's not doing anything to the label, it's just a plain string. I'm trying to figure out what additional logic to add to make the string into a click, either by modifying the dynamic field or the element base (really new to this) – mana Oct 21 '21 at 21:36

0 Answers0