本篇參看：
https://developer.salesforce.com/docs/component-library/documentation/en/lwc/lwc.reactivity_fields
碰到之前接觸的記錄一下，深化一下印象。
一. 解決 lightning-record-edit-form沒有入力時，效果和標准不一樣的問題
先看一下標准的創建數據的UI，當有必入力字段的表單，點擊Save按鈕以后，上部會有DIV提示。
我們使用 lightning-record-edit-form實現時，發現onsubmit這種 handler需要再所有的字段都滿足情況下才執行，也就是說頁面中有 invalid的字段入力情況下，不會提交表單，也自然無法執行 onsubmit對應的方法。這個時候，我們就需要在submit的這個按鈕添加 onclick方法去調用后台從而實現盡管提交不了表單還可以正常做一些UI效果的可能。簡單代碼如下
accountEditWithEditForm.html： 展示兩個字段，save button除了在submit基礎上，還有 onclick操作。需要注意的是， onclick會先於 onsubmit執行，所以我們可以在 onclick做一些validation操作，成功的話，讓onsubmit正常執行表單提交操作。
<template> <lightning-record-edit-form record-id={recordId} object-api-name="Account" onsubmit={handleSubmit} > <lightning-messages></lightning-messages> <c-error-message-modal is-show-error-div={isShowErrorDiv} error-message-list={errorMessageList}></c-error-message-modal> <lightning-layout multiple-rows="true"> <lightning-layout-item size="6"> <lightning-input-field field-name="Name"></lightning-input-field> </lightning-layout-item> <lightning-layout-item size="6"> <lightning-input-field field-name="AnnualRevenue"></lightning-input-field> </lightning-layout-item> <lightning-layout-item size="12"> <div class="slds-m-top_medium"> <lightning-button class="slds-m-top_small" label="Cancel" onclick={handleReset}></lightning-button> <lightning-button class="slds-m-top_small" type="submit" label="Save Record" onclick={handleClick}></lightning-button> </div> </lightning-layout-item> </lightning-layout> </lightning-record-edit-form> </template>
accountEditWithEditForm.js
import { LightningElement,track,api,wire } from 'lwc';
import { updateRecord,getRecord } from 'lightning/uiRecordApi';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
import { NavigationMixin } from 'lightning/navigation';
import { navigationWhenErrorOccur } from 'c/navigationUtils';
import {isSystemOrCustomError,getPageCustomErrorMessageList,getFieldCustomErrorMessageList} from 'c/errorCheckUtils';
import ACCOUNT_ID_FIELD from '@salesforce/schema/Account.Id';
import ACCOUNT_NAME_FIELD from '@salesforce/schema/Account.Name';
import ACCOUNT_ANNUALREVENUE_FIELD from '@salesforce/schema/Account.AnnualRevenue';
const fields = [
ACCOUNT_ID_FIELD,
ACCOUNT_NAME_FIELD,
ACCOUNT_ANNUALREVENUE_FIELD
];
export default class AccountEditWithEditForm extends NavigationMixin(LightningElement) {
@api recordId = '0010I00002U8dBPQAZ';
@track isShowErrorDiv = false;
@track errorMessageList = [];
@track isFormValid = true;
handleSubmit(event) {
event.preventDefault();
if(!this.isShowErrorDiv) {
const fields = {};
fields[ACCOUNT_ID_FIELD.fieldApiName] = this.recordId;
fields[ACCOUNT_NAME_FIELD.fieldApiName] = event.detail.Name;
fields[ACCOUNT_ANNUALREVENUE_FIELD.fieldApiName] = event.detail.AnnualRevenue;
const recordInput = { fields };
this.errorMessageList = [];
this.isShowErrorDiv = false;
updateRecord(recordInput)
.then(() => {
this.dispatchEvent(
new ShowToastEvent({
title: 'Success',
message: 'Account updated',
variant: 'success'
})
);
}).catch(error => {
let systemOrCustomError = isSystemOrCustomError(error);
if(systemOrCustomError) {
navigationWhenErrorOccur(this,error);
} else {
this.isShowErrorDiv = true;
this.errorMessageList = getPageCustomErrorMessageList(error);
console.log(JSON.stringify(this.errorMessageList));
let errorList = getFieldCustomErrorMessageList(error);
if(errorList && errorList.length > 0) {
errorList.forEach(field => {
this.reportValidityForField(field.key,field.value);
});
}
}
});
}
}
handleClick(event) {
let allInputList = Array.from(this.template.querySelectorAll('lightning-input-field'));
let invalidFieldLabel = [];
const allValid = allInputList.forEach(field => {
if(field.required && field.value === '') {
invalidFieldLabel.push(field.fieldName);
this.isShowErrorDiv = true;
}
});
if(this.isShowErrorDiv) {
this.errorMessageList.push('These required fields must be completed: ' + invalidFieldLabel.join(','));
}
}
reportValidityForField(fieldName,errorMessage) {
console.log('fieldname : ' + fieldName);
if(fieldName === 'Name') {
this.template.querySelector('.accountName').setCustomValidity(errorMessage);
this.template.querySelector('.accountName').reportValidity();
} else if(fieldName === 'AnnualRevenue') {
this.template.querySelector('.accountRevenue').setCustomValidity(errorMessage);
this.template.querySelector('.accountRevenue').reportValidity();
}
}
handleReset(event) {
const inputFields = this.template.querySelectorAll(
'lightning-input-field'
);
if (inputFields) {
inputFields.forEach(field => {
field.reset();
});
}
}
}
展示效果：
二. 「`」 的使用
我們在程序中應該很習慣的使用 track / api這種 reactive的變量，改動以后就可以走 rendercallback 然后前端UI會自動渲染和他關聯的。除了使用這兩個情況，還可以使用getter方式進行 field reactive操作。官方的描述為，如果字段聲明不需要使用 track / api這種reactive變量，盡量不用，所以某些case下，我們可以使用 關鍵字 ``進行操作。這個標簽是鍵盤的哪個呢，看下圖？
看一下官方提供的demo
helloExpressions.html：輸入框展示兩個入力項，下面展示一個拼以后的大寫。
<template> <lightning-card title="HelloExpressions" icon-name="custom:custom14"> <div class="slds-m-around_medium"> <lightning-input name="firstName" label="First Name" onchange={handleChange} ></lightning-input> <lightning-input name="lastName" label="Last Name" onchange={handleChange} ></lightning-input> <p class="slds-m-top_medium"> Uppercased Full Name: {uppercasedFullName} </p> </div> </lightning-card> </template>
helloExpressions.js：使用 `方式整合兩個private的字段，實現reactive的效果。這里需要注意的是，如果使用 `以后必須要使用 ${}將變量套起來，這個是固定的寫法。
import { LightningElement } from 'lwc';
export default class HelloExpressions extends LightningElement {
firstName = '';
lastName = '';
handleChange(event) {
const field = event.target.name;
if (field === 'firstName') {
this.firstName = event.target.value;
} else if (field === 'lastName') {
this.lastName = event.target.value;
}
}
get uppercasedFullName() {
return `${this.firstName} ${this.lastName}`.trim().toUpperCase();
}
}
效果：
總結：篇中主要總結兩點。1是 record-edit-form submit前的onclick使用；2是` 搭配 {}實現 reactive的效果。篇中有錯誤地方歡迎指出，有不懂的歡迎留言。