Salesforce LWC學習(十九) 針對 lightning-input-field的label值重寫
本篇參考：
https://developer.salesforce.com/docs/component-library/bundle/lightning-input-field/documentation
https://www.lightningdesignsystem.com/components/input/
在https://www.cnblogs.com/zero-zyq/p/11380449.html篇中，我們瞭解了 LDS的使用，其中讓我們用起來很爽的莫過於使用lightning-input-field。
我們在Account表中建立兩個欄位，分別為User_For_LookUp__c關聯到User表以及Contact_For_Lookup__c用來關聯到Contact表。
eventCreate.html：用於關聯需要建立Event的幾個欄位，因為Event不能使用 lightning-record-edit-form，所以將 暫時繫結 到Account，OwnerId使用 User_For_LookUp__c借殼繫結，WhoId使用Contact_For_Lookup__c繫結。
<template>
<lightning-card>
<lightning-record-edit-form
object-api-name='Account'
onsubmit={saveEvent}>
<lightning-layout multiple-rows="true">
<lightning-layout-item size="6" padding="around-small" flexibility='auto'>
<lightning-input type="text" label="Subject" name="subject" value={eventWrapper.subject} onchange={handleInputChange}></lightning-input>
</lightning-layout-item>
<lightning-layout-item size="6" padding="around-small" flexibility='auto'>
</lightning-layout-item>
<lightning-layout-item padding="around-small" flexibility='auto' size='6'>
<lightning-input label="Start Date" type="datetime" name="startDateTime" value={eventWrapper.startDateTime} date-style="long" required onchange={handleInputChange}></lightning-input>
</lightning-layout-item>
<lightning-layout-item padding="around-small" flexibility='auto' size='6'>
<lightning-input label="End Date" type="datetime" name="endDateTime" value={eventWrapper.endDateTime} date-style="long" required onchange={handleInputChange}></lightning-input>
</lightning-layout-item>
<lightning-layout-item size="6" padding="around-small" flexibility='auto'>
<lightning-input-field
field-name="User_For_LookUp__c"
variant="label-stacked"
></lightning-input-field>
</lightning-layout-item>
<lightning-layout-item size="6" padding="around-small" flexibility='auto'>
<lightning-input-field
field-name="Contact_For_Lookup__c"
variant="label-stacked"
></lightning-input-field>
</lightning-layout-item>
</lightning-layout>
<lightning-layout>
<lightning-layout-item>
<lightning-button-group>
<lightning-button type="submit" label="Submit"></lightning-button>
<lightning-button label="cancel"></lightning-button>
</lightning-button-group>
</lightning-layout-item>
</lightning-layout>
</lightning-record-edit-form>
</lightning-card>
</template>
eventCreate.js：當 saveEvent方法時，先組織預設提交，通過event.detail.fields可以獲取到 record-edit-form中的所有的 lightning-input-field的繫結值內容，在給自定義的wrapper欄位賦值傳遞到後臺即可。
import { LightningElement,track } from 'lwc';
export default class EventCreate extends LightningElement {
@track eventWrapper = {
subject : '',
whoId : '',
ownerId : '',
startDateTime : '',
endDateTime : ''
};
handleInputChange(event) {
let eventSourceName = event.target.name;
if(eventSourceName === 'subject') {
this.eventWrapper.subject = event.target.value;
} else if(eventSourceName === 'startDateTime') {
this.eventWrapper.startDateTime = event.target.value;
} else if(eventSourceName === 'endDateTime') {
this.eventWrapper.endDateTime = event.target.value;
}
}
saveEvent(event) {
event.preventDefault();
const allFields = event.detail.fields;
this.eventWrapper.whoId = allFields.User_For_LookUp__c;
this.eventWrapper.ownerId = allFields.Contact_For_Lookup__c;
console.log(JSON.stringify(this.eventWrapper));
}
}
效果展示：當我們錄入完基本資訊點選 submit按鈕以後，console欄展示了返回的內容。
上面我們使用的variant是label-stacked，可以看到User_For_LookUp__c欄位展示的 label是 User For LookUp，但是我們想要展示他的值是 Owner Id，然而lightning-input-field中沒有任何屬性可以更改其label值，應該如何操作呢？這個時候可以看前輩們提供的方法了，原操作可以檢視片頭連結。
祕密就在variant中，lwc針對此元件存在一個variant為label-hidden，即不展示 label資訊，我們只需要隱藏這個欄位的label值，然後通過lightning design system中的提供方式重新佈局展示想要的label資訊即可，優化後程式碼如下：
修改之後的展示效果：
總結：篇中主要描述如何對 lightning-input-field的label值進行修改，允許修改以後可以極大程度上保證了欄位的複用性和可擴充套件性。篇中有錯誤地方歡迎指出，有不懂歡迎留言。