Last active
June 24, 2020 13:27
-
-
Save mhamzas/82da37daa836f0ccdf37333dfdb43975 to your computer and use it in GitHub Desktop.
LWC input with validations | https://salesforce.stackexchange.com/questions/306007/validate-input-for-lwc-in-flow-builder
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!-- | |
| @File Name : lightningInput.html | |
| @Description : | |
| @Author : M Hamza Siddiqui @ mhamzas.com | |
| @Group : | |
| @Last Modified By : M Hamza Siddiqui @ mhamzas.com | |
| @Last Modified On : 6/23/2020, 9:37:07 PM | |
| @Modification Log : | |
| Ver Date Author Modification | |
| 1.0 6/21/2020 M Hamza Siddiqui @ mhamzas.com Initial Version | |
| --> | |
| <template> | |
| <div class="slds-scope slds-form-element slds-form-element_stacked"> | |
| <lightning-input | |
| body={body} | |
| field-level-help={help} | |
| formatter={formatter} | |
| is-loading={isLoading} | |
| label={label} | |
| max={max} | |
| max-length={maxLength} | |
| message-toggle-active={messageToggleActive} | |
| message-toggle-inactive={messageToggleInactive} | |
| message-when-bad-input={messageWhenBadInput} | |
| message-when-pattern-mismatch={messageWhenPatternMismatch} | |
| message-when-range-overflow={messageWhenRangeOverflow} | |
| message-when-range-underflow={messageWhenRangeUnderflow} | |
| message-when-step-mismatch={messageWhenStepMismatch} | |
| message-when-too-long={messageWhenTooLong} | |
| message-when-too-short={messageWhenTooShort} | |
| message-when-type-mismatch={messageWhenTypeMismatch} | |
| message-when-value-missing={messageWhenValueMissing} | |
| min={min} | |
| min-length={minlength} | |
| multiple={multiple} | |
| name={name} | |
| pattern={pattern} | |
| placeholder={placeholder} | |
| readonly={readonly} | |
| required={required} | |
| step={step} | |
| title={title} | |
| type={type} | |
| value={value} | |
| variant={variant} | |
| style={styleattr} | |
| class="input_required" | |
| onchange={handleChange} | |
| onblur={validate} | |
| > | |
| </lightning-input> | |
| <template if:true={isErrorMessage}> | |
| <span class="slds-text-color_error">{errorMessage}</span> | |
| </template> | |
| </div> | |
| </template> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import { LightningElement, api, track } from 'lwc'; | |
| import { FlowAttributeChangeEvent } from 'lightning/flowSupport'; | |
| export default class LightningInput extends LightningElement { | |
| //All types | |
| @api label ='Label'; | |
| @api type='text'; | |
| @api value; | |
| @api name; | |
| @api readonly; | |
| @api required; | |
| @api styleattr; | |
| // @api accesskey; | |
| // @api checked; | |
| @api disabled; | |
| @api formatter; | |
| @api isLoading; | |
| @api max; | |
| @api maxLength; | |
| @api min; | |
| @api minlength; | |
| @api multiple; | |
| @api pattern; | |
| @api placeholder; | |
| @api step; | |
| // @api tabindex; | |
| @api title; | |
| @api variant; | |
| @api help; | |
| @api messageToggleActive; | |
| @api messageToggleInactive; | |
| @api messageWhenBadInput; | |
| @api messageWhenPatternMismatch; | |
| @api messageWhenRangeOverflow; | |
| @api messageWhenRangeUnderflow; | |
| @api messageWhenStepMismatch; | |
| @api messageWhenTooLong; | |
| @api messageWhenTooShort; | |
| @api messageWhenTypeMismatch; | |
| @api messageWhenValueMissing; | |
| @api checkboxval; | |
| @track errorMessage; | |
| connectedCallback() { | |
| console.log(this.type); | |
| console.log(this.value); | |
| console.log(this.label); | |
| console.log(this.required); | |
| // lowercasing type value | |
| this._type = this.type.toLowerCase(); | |
| //this.checkboxval = this.checkbox? true:false; | |
| //this.validateInputs(); | |
| } | |
| get errorMessageLength() { | |
| return this.errorMessage.length; | |
| } | |
| set errorMessageLength(event) { | |
| return this.errorMessage.length; | |
| } | |
| get isErrorMessage() { | |
| return this.errorMessageLength > 0; | |
| } | |
| set isErrorMessage(event) { | |
| return this.errorMessageLength > 0; | |
| } | |
| // @api | |
| // get value(){ | |
| // return this._value; | |
| // } | |
| // set value(val){ | |
| // this._value = val; | |
| // } | |
| renderedCallback(){ | |
| this.validate(); | |
| } | |
| handleChange(event) { | |
| console.log('EVENT',event); | |
| //this.validateInputs(); | |
| this.value = event.detail.value; | |
| console.log("selected value is: " + this.value); | |
| this.dispatchFlowAttributeChangedEvent('value', this.value); | |
| this.validator(); | |
| } | |
| dispatchFlowAttributeChangedEvent(attributeName, attributeValue){ | |
| const attributeChangeEvent = new FlowAttributeChangeEvent( | |
| attributeName, | |
| attributeValue | |
| ); | |
| this.dispatchEvent(attributeChangeEvent); | |
| } | |
| validator(){ | |
| console.log("entering validate: required=" + this.required + " value=" + this.value); | |
| if(this.required & !this.value){ | |
| this.errorMessage = this.messageWhenValueMissing? this.messageWhenValueMissing : "This field is required."; | |
| /*}else if(this.maxLength && this.value.length > this.maxLength){ | |
| this.errorMessage = this.messageWhenTooLong? this.messageWhenTooLong : "Invalid Input"; | |
| }else if(this.max && this.value > this.max){ | |
| this.errorMessage = this.messageWhenRangeOverflow? this.messageWhenRangeOverflow : "Value is too high"; | |
| }else if(this.min && this.value < this.min){ | |
| this.errorMessage = this.messageWhenRangeUnderflow? this.messageWhenRangeUnderflow : "Value is too low"; | |
| }else if(this.minlength && this.value.length < this.minlength){ | |
| this.errorMessage = this.messageWhenTooShort? this.messageWhenTooShort : "Invalid Input";*/ | |
| } else { | |
| this.errorMessage = ""; | |
| } | |
| } | |
| // validateInputs(){ | |
| // // Overall Validation | |
| // var error = false; | |
| // let fields = this.template.querySelectorAll(".input_required"); | |
| // fields.forEach((field) => { | |
| // //console.log(field.label+'='+field.value); | |
| // //console.log('Validity::'+field.checkValidity()); | |
| // if(field.checkValidity() === false){ | |
| // error=true; | |
| // } | |
| // field.reportValidity(); // Tells lightning-input to show the error right away without needing interaction | |
| // }); | |
| // } | |
| @api | |
| validate() { | |
| //If the component is invalid, return the isValid parameter as false and return an error message. | |
| let error = false; | |
| this.validator(); | |
| console.log('Value Type::'+ typeof this.value); | |
| if(this.errorMessage){ | |
| error = true; | |
| } | |
| /*// Overall Validation | |
| let error=false; | |
| let fields = this.template.querySelectorAll(".input_required"); | |
| fields.forEach((field) => { | |
| //console.log(field.label+'='+field.value); | |
| //console.log('Validity::'+field.checkValidity()); | |
| if(field.checkValidity() === false){ | |
| error=true; | |
| } | |
| field.reportValidity(); // Tells lightning-input to show the error right away without needing interaction | |
| });*/ | |
| if (error === true) { | |
| return { | |
| isValid: false, | |
| errorMessage: this.errorMessage | |
| }; | |
| } | |
| return { isValid: true }; | |
| } | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <?xml version="1.0" encoding="UTF-8"?> | |
| <LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata"> | |
| <apiVersion>48.0</apiVersion> | |
| <isExposed>true</isExposed> | |
| <masterLabel>Lightning Input (LWC) v1.0</masterLabel> | |
| <targets> | |
| <target>lightning__FlowScreen</target> | |
| </targets> | |
| <targetConfigs> | |
| <targetConfig targets="lightning__FlowScreen"> | |
| <!-- <property name="accesskey" label="accesskey" default="" type="String" /> --><!-- <property name="checked" label="checked" default="" type="Boolean" /> --><!-- <property name="disabled" label="disabled" default="" type="String" /> --><property name="formatter" label="formatter" default="" type="String"/> | |
| <property name="label" label="label" default="Label" required="true" type="String" description="Text label for the input."/> | |
| <property name="max" label="max" default="" type="String"/> | |
| <property name="maxLength" label="maxlength" default="" type="String"/> | |
| <property name="min" label="min" default="" type="String"/> | |
| <property name="minlength" label="minlength" default="" type="String"/> | |
| <property name="multiple" label="multiple" default="" type="String"/> | |
| <property name="name" label="group name (radio)" default="" type="String"/> | |
| <property name="pattern" label="pattern" default="" type="String"/> | |
| <property name="placeholder" label="placeholder" default="" type="String"/> | |
| <property name="readonly" label="readonly" default="" type="String"/> | |
| <property name="required" label="required" default="" type="String"/> | |
| <property name="step" label="step" default="" type="String"/> | |
| <property name="title" label="title" default="" type="String"/> | |
| <property name="type" label="type" type="String" default="text" required="true"/> | |
| <property name="value" label="value" default="" type="String"/> | |
| <property name="variant" label="variant" default="" type="String"/> | |
| <property name="styleattr" label="style" default="" type="String"/> | |
| <property name="help" label="msg: Help Text" default="" type="String"/> | |
| <property name="messageToggleActive" label="msg: Toggle Active" default="" type="String"/> | |
| <property name="messageToggleInactive" label="msg: Toggle Inactive" default="" type="String"/> | |
| <property name="messageWhenBadInput" label="err: Bad Input" default="" type="String"/> | |
| <property name="messageWhenPatternMismatch" label="err: Pattern Mismatch" default="" type="String"/> | |
| <property name="messageWhenRangeOverflow" label="err: Range Overflow" default="" type="String"/> | |
| <property name="messageWhenRangeUnderflow" label="err: Range Underflow" default="" type="String"/> | |
| <property name="messageWhenStepMismatch" label="err: Step Mismatch" default="" type="String"/> | |
| <property name="messageWhenTooLong" label="err: Too Long" default="" type="String"/> | |
| <property name="messageWhenTooShort" label="err: Too Short" default="" type="String"/> | |
| <property name="messageWhenTypeMismatch" label="err: Type Mismatch" default="" type="String"/> | |
| <property name="messageWhenValueMissing" label="err: Value Missing" default="" type="String"/> | |
| </targetConfig> | |
| </targetConfigs> | |
| </LightningComponentBundle> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment