error信息显示状态下输入框继续输入内容时error不消失问题

原创

repick

修改于 2021-11-24 19:27:29

60600

代码可运行

文章被收录于专栏：SalesforceSalesforce

运行总次数：0

代码可运行

Lwc自定义开发时，当使用【lightning-input】作为输入框，在发生错误清空下，需要继续输入信息，输入过程中如下图error信息不会消失，只有在失去焦点时才会消失。

Lwc代码例：

<template>
  <lightning-card title="input demo">
    <lightning-input type="text" value={inputValue} onchange={handleChangeEvent} required label="test input">
    </lightning-input>
</lightning-card>
</template>

import { LightningElement, track } from 'lwc';
export default class ExampleLwcInputRequired extends LightningElement {
  @track inputValue = '';
    handleChangeEvent(event) {
        this.inputValue = event.detail.value;
    }
}

现在的需求是在输入过程中，error信息自动消失，要如何实现呢，解决方法是利用setCustomValidity方法，设置空值，然后调用reportValidity方法。

如下：

import { LightningElement, track } from 'lwc';
export default class ExampleLwcInputRequired extends LightningElement {
  @track inputValue = '';
    handleChangeEvent(event) {
        this.inputValue = event.detail.value;
        if(this.template.querySelector('lightning-input').checkValidity()) {
            this.template.querySelector('lightning-input').setCustomValidity('');
            this.template.querySelector('lightning-input').reportValidity();
        }
    }
}