[SalesForce] remove error message in javascript in lwc

I have a text input field serial number and a toggle button.serial number is required by default. So, if serial number is left blank then it will display error message.
But,If the toggle button is checked then error message from serial number should be removed. But it continues to display the error message.

html

<template>
<lightning-input class="serialnumber" label ="serial 
  number" name="serialnumber" onchange= {handleChange} required={isRequired}
                          message-when-value-missing="serial Number is req">
</lightning-input>
  <!--toggle html>
  <label class="slds-checkbox_toggle slds-truncate"> 
  <input type="checkbox" name="infoToggle" checked={infoToggleValue} 
                                           onchange={handleChange} />
  <span class="slds-checkbox_on slds-text-body_small">not required</span>
  <span class="slds-checkbox_off slds-text-body_small">required</span>
  </label>
</template>

js

import { LightningElement, track} from 'lwc';
export default class CmpInputScreen extends LightningElement {

@track serialNumber;
@track infoToggleValue = false;
get isRequired(){
    if(this.infoToggleValue){
        return false;
    } return true;
}
handleChange(event) {
    const inputName = event.target.name;
    if (inputName === 'serialnumber') {
        this.serialNumber= event.target.value;
    }else if(inputName === 'infoToggle'){
        //it gets set to true when checked and isRequired sets to false
        this.infoToggleValue = event.target.checked; 
        if(this.infoToggleValue){
           let inputEle = this.template.querySelector('.serialnumber');
            inputEle.setCustomValidity("");
            inputEle.reportValidity();
          }
        }
       }
}

Best Answer

It's a matter of asynchronous rendering. When you update the value of this.infoToggleValue, you need to allow some time for the isRequired expression to get re-evaluated in your template before reporting validity.

You need to wrap your call to reportValidity in a resolved Promise to let the framework do a rerender in the meantime.

handleChange(event) {
    const inputName = event.target.name;
    if (inputName === 'serialnumber') {
        this.serialNumber = event.target.value;
    } else if (inputName === 'infoToggle') {
        //it gets set to true when checked and isRequired sets to false
        this.infoToggleValue = event.target.checked;
    }
    // Revalidate serial number
    Promise.resolve().then(() => {
        const inputEle = this.template.querySelector('.serialnumber');
        inputEle.reportValidity();
    });
}

Edit: force revalidation of serial number in all cases.

Related Solutions

[SalesForce] Display required Error message upon submitting a LWC form

Do I need to write my own logic to display custom message?

Yes.

This is from documentation for lightning-input:

For example, you have the following form with several fields and a button. To display error messages on invalid fields, use the reportValidity() method.

Your submit function should implement something as mentioned in the documentation (as below). I did a quick test and once the input fields are validated, you are able to view the required field error on the fields.

@track value = "initial value";

handleClick(evt) {
    console.log('Current value of the input: ' + evt.target.value);

    const allValid = [...this.template.querySelectorAll('lightning-input')]
        .reduce((validSoFar, inputCmp) => {
                    inputCmp.reportValidity();
                    return validSoFar && inputCmp.checkValidity();
        }, true);
    if (allValid) {
        alert('All form entries look valid. Ready to submit!');
    } else {
        alert('Please update the invalid form entries and try again.');
    }
}

[SalesForce] Pre selected Rows with Pagination not working in Datatable in Saleforce LWC

You need to keep a separate list of all selections in one variable, then update this variable accordingly as you navigate pages (and also keep track of any changes).

allSelectedRows = [];
preselectedRows = [];
changePage(pageNumber) {
    let pageData = this.getPageData();
    this.allSelectedRows = this.allSelectedRows
        .filter((rowId) => !pageData.find((record) => record.UserId === rowId)) // Preserve rows outside current page
        .concat(this.template.querySelector('lightning-datatable').selectedRows); // and add rows from current page
    this.page = pageNumber;
    pageData = this.getPageData();
    this.preslectedRows = this.allSelectedRows.filter(
        (rowId) => pageData.find((record) => record.UserId === rowId) // And now find records in current page
    );
}
onFirst() {
    this.changePage(1);
}
onNext() {
    this.changePage(this.page + 1);
}
// ... etc ...

Also, some general notes...

First, don't use await and then() together:

try {
// other code here
  let userList = await getUserList();
  // rest of code here
} catch(error) {
  this.error = error;
}
this.showLoadingSpinner = false;

Or:

getUserList().then(
  userList => {
    // success logic here
  })
  .catch(error => this.error = error)
  .finally(() => this.showLoadingSpinner = false);

Second, you really didn't need to JSON.serialize and JSON.parse, you can return the wrappers directly.

Best Answer

Related Solutions

[SalesForce] Display required Error message upon submitting a LWC form

[SalesForce] Pre selected Rows with Pagination not working in Datatable in Saleforce LWC

Related Topic