How to Fix Compilation Failure LWC1010: Failed to resolve entry for module

By default camel case component folder names are mapped to kebab-case in the markup when calling them from Lightning Web Components.

Eg. myComponent would be my-component

VSStudio code autocomplete would miss this example ” myCRMApp”

<my-component></my-component>
<c-my-crm-app></c-my-crm-app>

To fix this myCRMApp would be my-c-r-m-app

<c-my-c-r-m-app></c-my-c-r-m-app>

Creating a Modal Popup Lightning Component

A quick tutorial on how to create a modal popup with Lightning Component.

What is modal popup?

Modal popup acts like a container for your content that displays on top of the content you are viewing. Imagine content stacked on top of it.

In short, a modal popup is a very handy way of showing content in front of your app.

How to build one in lightning?

  • First create lightning component and add a boolean attribute then default it’s value to false
  • On your controller, toggle the boolean value as you see fit based on events.
    • cancelBtn onclick event sets the displayModal value to true, thus displaying the modal.
    • yesBtn onclick event tied to the button navigates to another URL and sets the displayModal value back to false, thus hiding the modal popup

That’s it, you should have a working modal popup ready to go.

Final code is available here in GitHub

https://github.com/olopsman/lc-modal-popup

How to Validate forms built with Lightning Components

I recently had a requirement to create a basic lightning component to capture form inputs. I previously had a not so good experience with building custom validation with Lightning components back in Summer17 when lightning was pretty new. I was using force:inputField and also used lightning:inputField.

Past few years it has become more efficient and easier with just the lightning:input field and default HTML5 APIs.

I have a simple bank form that captures and validates the form as such and when submitted validates the required fields.

Form

For the Bank Account Name input field specify the required attribute as true and check the validity of the field.

I use reportValidity to display the error message in the input field

And for the Bank Account Number input field aside from setting the field as true, I also specified a regular expression pattern. And then used the setCustomValidity function to display a custom error message.

And that folks, is how easy to validate the input form. Hit the comments below if you need help building your validation.