当前位置：首页 > news >正文

【Salesforce】【LWC】响应式验证标准查找输入框

news 来源：原创 2024/5/3 3:39:42

应用场景

在使用lwc的标准查找输入标签 lightning-input-field 中，有时候会需要验证用户的输入内容，并且根据内容进行不同的处理。如果用户的选择不符合要求，则需要清除输入的内容，并且提示用户。

*补充说明：*标准查找输入标签指 lightning-input-field 的 field-name 值为一个查找（look-up）字段。

响应式验证

怎么做到能够清除标准输入框的内容？其实很简单，在标准标签中添加上一个 value 属性，并且在js中管理这个变量。

例：

html：

<lightning-input-field variant="standard" required class="slds-size--3-of-7 slds-m-left--xx-large" value={value} onchange={valid} field-name='LOOK_UP__c'></lightning-input-field>

js:

@track value
valid(event) {
    const id = event.detail.value[0]
}

在查找输入框中，input值虽然在前端显示的是Name，但是js中取到的是这条记录的id，因此，在验证方法中，需要对id值进行验证。

Apex:

@AuraEnabled
public static Boolean valid(Id recordId) {
    LOOK_UP__c = [SELECT Id, Name, ... FROM LOOK_UP__c WHERE Id = :recordId];
    // ... some validation
    validationResult = ...;
    return validationResult
}

在js中，根据Apex返回的结果，做出相应的处理：

@track value
valid(event) {
    const id = event.detail.value[0]
    valid({recordId: id}).then(result => {
        if (!!result) {
            // valid
        } else {
            // invalid, clear the input
            this.value = ''
        }
    })
}

注意，在invalid的情况下，清除了input框的入力值，在lwc框架下，这会自动把标准输入框的内容清楚。这是对标签的value属性被清除做出的响应动作。

但是单单这样是不够的，当你第二次输入，验证失败之后，输入框的内容并不会像第一次一样被清除。这是因为第二次输入的前后，value值并没有改变，一直是第一次被赋值的 ''。因此标签并没有发现value的变化，从而不会做出响应式行为。

因此，需要在标签的 onchange 事件中，手动改变value值：

valid(event) {
    const id = event.detail.value[0]
    // set the value to input value
    this.value = id
    valid({recordId: id}).then(result => {
        if (!!result) {
            // valid
        } else {
            // invalid, clear the input
            this.value = ''
        }
    })
}

同时，因为用户可能手动清除输入框，这个情况下，不需要对空输入进行验证，所以为了避免这种情况，在调用Apex方法前，需要再加一层判断：

valid(event) {
    const id = event.detail.value[0]
    // set the value to input value
    this.value = id
    if (!!id) {
        valid({recordId: id}).then(result => {
            if (!!result) {
                // valid
            } else {
                // invalid, clear the input
                this.value = ''
            }
        })
    }
}