Lightning Web Components - How to build forms with custom behaviours?

Question

The lightning-record-edit-form is very clever, but so far I've found it useful only for reasonably default (and static) behaviour that can be defined in a layout.

I need to build a form where the values in some fields will affect the behaviour of other fields in the form. e.g. selecting a certain value in one field may determine whether other fields are required or editable, or disabled, or have a different set of validation rules applied to them.

When using Angular and other frameworks, there were built-in ways to dynamically set the behaviour of an element (e.g. with ng-required, ng-disabled etc) and based on those behaviours if the element and the form as a whole were valid.

Are there similar ways to dynamically configure the behaviour of form elements?

And is determining if a custom form is valid best done by selecting all of the elements (e.g. by class) and call checkValidity() on each element?

Thanks

Answer 1

In layman terms, angular is 2-way binding and LWC is 1-way binding. It means:

1. 2-way binding : Change of an attribute is communicated to both parent and child components in hierarchy when referenced. This is same in Aura framework also. Consider below example:

   inputVal - {!v.inputVal}

When inputVal changes inside lightning:input element, that value is reflected to the parent component which has implemented it and so even in second line it will reflect immediately. Same thing happens in angular ng-required also.

However, because of the locker service, all the standard objects like window, document etc are modified at prototype level. This is done and checked for every transaction which has affected the performance of aura components (adversely in some cases like aura:iteration)

2. 1-way binding : The change in attribute is reflected ONLY down the hierarchy chain of components.

Consider below example:

<lightning-input value={inputVal} ></lightning-input>
inputVal - {inputVal}

Here when you change the value in input, it will not be reflected in the parent component which has implemented it and so its value is not immediately reflected. This is same in ReactJS. For reflecting that change, you need put onchange handler and change the value of inputVal manually through event.target.value. Then the value is reflected in second line also.

So, in LWC you need to get all the form elements through querySelectorAll and check the validity - this can be done when you click Save. However, you can tweak the design a little to make it more dynamic by using getter and Maps (javascript conventional objects)