输入字段修正LWC

Question

我需要帮助，把输入场所需。当用户单击“搜索”时，如果搜索字段为空，则应以红色显示错误消息。

```<template>

<div class="slds-col">

    <div class="slds-form-element__control">

        <input type="text" placeholder="Enter id here" required="" value={inputId} onchange={onchangeIdhandler}    class="slds-input" />

    </div>

</div>

<div class="slds-col  slds-p-horizontal_large">

    <button class="bg slds-button slds-align_absolute-center"  onclick={handleSearch}>Search</button>

</div>

Answer 1

您可以使用来自SLDS库的误差变量作为起点，使用错误消息实现您自己的输入。

例如，在html中可以执行如下操作：

<template>
    <div class="slds-grid">
        <div class="slds-col">
            <div class={inputCss}>
                <label class="slds-form-element__label"> Input Label </label>
                <div class="slds-form-element__control">
                    <input type="text" placeholder="Enter id here" required="" value={inputId} onchange={onchangeIdhandler} class="slds-input" />
                </div>
                <template if:true={error}>
                    <div class="slds-form-element__help">{error}</div>
                </template>
            </div>
        </div>
        <div class="slds-col slds-p-horizontal_large">
            <button class="bg slds-button slds-align_absolute-center" onclick={handleSearch}>Search</button>
        </div>
    </div>
</template>

在javascript控制器中，您可以添加属性以显示错误：

// ... other imports
import { LightningElement } from "lwc";

export default class InputError extends LightningElement {
    // ... other properties
    error = "";

    get inputCss() {
        let classes = "slds-form-element";

        if (this.error) {
            classes.push("slds-has-error");
        }

        return classes.join(" ");
    }

    // ... other methods
}