2

I would like to create a custom composite component to re-create the LWC input field behavior if possible.

<lightning-record-edit-form ... >
 <template for:each={Fields} for:item="field">
   <c-input-field-wrapper 
     key={field.name} 
     field-name={field.name}
     data-type={field.type}
 ></c-input-field-wrapper>
</template>
</lightning-record-edit-form>

The inputFieldWrapper would then be a large case statement (template ifs) that outputs different input components depending on the data-type.

The issue I have is that the data binding breaks when it's rendered as a child component.

I know that components can be mixed as Steven's been able to demonstrate Wissel Blog - Mixing lwc-inputs with custom data aware fields The but in his example he's declaring the inputs explicityly, and I'd like to dynamically render a specific one inside a loop depending on the data type and bind it.

That being said - I'm looking for help on the best method to go about doing this. A fellow dev mentioned that angular's use of a "replace:true" tag attribute allowed the rendered tag to be not shown as shown here but I don't know if the lwc engine allows for this behavior either.

As a side-note - Salesforce documents this behavior for the outputfield but does not mention it for the input field: Usage Considerations of Output Field . In this they mention that the output field must be a child of form with nesting restrictions (e.g. "You can't nest it in another component like lightning-layout though you can nest it in a div").

Any Help would be greatly appreciated - Thank you!

2

The short answer: don’t.

The long answer: You render separate record edit forms since that tag is inside the template repeat. That set aside, dynamic creation of components has explicitly been excluded from LWC since the respective Aura function has led to only grief and performance degradation.

What you can do if you feel that you want some dynamic creation: move that from runtime to design time. A call into the UI api can retrieve the fields and render a needed template.

  • Stephen, sorry - I corrected the psudo code above - the for each iterator should be a child of the form element. – Jeremy Adsitt Oct 31 '19 at 16:00
  • 1
    I figured that. Still: a loop would dynamically create elements -> not supported afaik – stwissel Oct 31 '19 at 16:12

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.