在同一个流程屏幕上验证多个所需的 LWC，而不会丢失值

Question

所以我最近开始更认真地投入到 LWC 中，我正在努力弄清楚这一切。我创建了一个自定义选项列表流组件，它接受一组字符串作为选项（为什么这不是标准我永远不会知道）。如果使用 @api validate().

将组件标记为“必需”，我已经设法阻止移动到下一页

但是，问题在于，如果这些组件中有多个在同一屏幕上，而其中一个未通过验证；然后在显示一个非常简短的加载图标后，所有组件（甚至是有效组件）的值都会被清除。我想尽可能地模仿标准要求的屏幕 component/field 功能，以避免输入失败和不一致。

下面是我当前的代码：

component.js

import { LightningElement, api, track } from 'lwc';

export default class StringPicklistFlowComponent extends LightningElement {
    @api optionsArr;
    @api label;
    @api isRequired = false;
    @api value;

    get isNotRequired(){return !this.isRequired;}

    get options(){
        var arr = [];
        for(var i = 0; i < this.optionsArr.length; i++){
            var tmp = this.optionsArr[i].split(/,\s*/g);
            arr.push({label: tmp[0], value: tmp[1]});
        }
        return arr;
    }

    handleSelect(evt){
        this.value = evt.detail.value;
    }

    @api validate(){
        return {
            isValid: this.isNotRequired || this.value != null,
            errorMessage: "Please select an option"
        }
    }
}

component.html

<template>
    <label for="customPicklist" class="slds-form-element__label slds-rich-text-editor__output">
        <span class="slds-required" hidden={isNotRequired}>*</span>
        {label}
    </label>
    <lightning-combobox id="customPicklist" value={value} options={options} onchange={handleSelect}>
    </lightning-combobox>
</template>

请注意，我确实手动创建了标签。这是因为当字段直接标记为“required”时的默认功能会在组件值为空时不断显示字段错误，这有点烦人。

任何关于这方面的帮助都会很棒，因为这已经困扰了我一天的大部分时间。

Answer 1

我设法找到了解决方案，所以我将 post 放在这里以防其他人遇到此问题。基本上，问题归结为组件被重新渲染，因此丢失了它以前的数据。为了解决这个问题，您可以使用本机浏览器 sessionStorage 来存储值，然后在重新呈现时使用 connectedCallback 挂钩来设置组件值。这是我的代码现在的样子：

component.js

import { LightningElement, api, track } from 'lwc';

export default class StringPicklistFlowComponent extends LightningElement {
    @api isRequired = false;
    @api optionsArr;
    @api label;
    @api value;

    @api connectedCallback(){
        if(!!sessionStorage[this.storageTag])
            this.value = sessionStorage[this.storageTag];
        else
            sessionStorage[this.storageTag] = this.value;
    }

    get storageTag(){ return this.label + 'myTag5135'; }

    get isNotRequired(){ return !this.isRequired; }

    get options(){
        var arr = [];
        for(var i = 0; i < this.optionsArr.length; i++){
            var tmp = this.optionsArr[i].split(/,\s*/g);
            arr.push({label: tmp[0], value: tmp[1]});
        }
        return arr;
    }

    handleSelect(evt){
        this.value = evt.detail.value;
        sessionStorage[this.storageTag] = this.value;
    }

    @api validate(){
        return {
            isValid: this.isNotRequired || !!this.value,
            errorMessage: "Please select an option"
        };
    }
}

component.html

<template>
    <div>
        <label for="customPicklist" class="slds-form-element__label">
            <abbr class="slds-required" hidden={isNotRequired}>* </abbr>{label}
        </label>
        <lightning-combobox dropdown-alignment="auto" id="customPicklist" data-fieldname={label} variant="label-hidden" value={value} options={options} onchange={handleSelect}>
        </lightning-combobox>
    </div>
</template>

如果您注意到了，我使用的标签属性并不理想（没有强制要求它是唯一的）。我想在流程中使用组件 api 名称，这样我几乎可以保证唯一性，但是我还没有找到如何在组件中获取此默认值属性。如果有人知道怎么做，我将不胜感激。无论如何，我希望这能帮助那些对这个奇怪的默认限制有类似挫败感的人。

在同一个流程屏幕上验证多个所需的 LWC，而不会丢失值

Validate multiple required LWC's on same flow screen, WITHOUT losing values

javascript

salesforce

lwc