Lwc中开发中，通常情况下使用【lightning-input-field】，好处是通过使用【field-name】可以直接绑定项目即可实现画面项目与Object的Field之间的绑定。
但是这种做法也有一些限制：
1.当前 user对 lighting-record-edit-form绑定的表应该有 create或者edit权限
2.当前的 user应该对 lightning-input-field绑定的字段有 visible的权限。
3.画面显示的label跟Object的Field的label相同，且不能更改。
如果想要更改label名称的情况下，可以使用【lightning-input】标签，这样就可以实现自定义label名称。代码如下。
项目Subject，Start Date，End Date更改了label名称，但是项目类型是LookUp的项目的话，不建议使用【lightning-input】标签。
代码语言：javascript复制<template>
<lightning-record-edit-form record-id={recordId} object-api-name="Opportunity"
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="OrderNumber__c"></lightning-input-field>
</lightning-layout-item>
<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-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>import { LightningElement,track,api,wire } from 'lwc';
import { updateRecord,getRecord } from 'lightning/uiRecordApi';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
import { NavigationMixin } from 'lightning/navigation';
import OPPORTUNITY_ID_FIELD from '@salesforce/schema/Opportunity.Id';
import OPPORTUNITY_NAME_FIELD from '@salesforce/schema/Opportunity.Name';
import OPPORTUNITY_ORDER_NUMBER_FIELD from '@salesforce/schema/Opportunity.OrderNumber__c';
import OPPORTUNITY_USER_FOR_LOOKUP_FIELD from '@salesforce/schema/Opportunity.User_For_LookUp__c';
import OPPORTUNITY_CONTACT_FOR_LOOKUP_FIELD from '@salesforce/schema/Opportunity.Contact_For_Lookup__c';
const fields = [
OPPORTUNITY_ID_FIELD,
OPPORTUNITY_NAME_FIELD,
OPPORTUNITY_ORDER_NUMBER_FIELD,
OPPORTUNITY_USER_FOR_LOOKUP_FIELD,
OPPORTUNITY_CONTACT_FOR_LOOKUP_FIELD
];
export default class OpportunityDetailEditWithEditForm extends NavigationMixin(LightningElement) {
@api recordId = '0066g00000GQ4GyAAL';
@track isShowErrorDiv = false;
@track errorMessageList = [];
@track isFormValid = true;
@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;
}
}
handleSubmit(event) {
event.preventDefault();
if(!this.isShowErrorDiv) {
const fields = {};
fields[OPPORTUNITY_ID_FIELD.fieldApiName] = this.recordId;
fields[OPPORTUNITY_NAME_FIELD.fieldApiName] = event.detail.Name;
fields[OPPORTUNITY_ORDER_NUMBER_FIELD.fieldApiName] = event.detail.OrderNumber__c;
fields[OPPORTUNITY_USER_FOR_LOOKUP_FIELD.fieldApiName] = event.detail.User_For_LookUp__c;
fields[OPPORTUNITY_CONTACT_FOR_LOOKUP_FIELD.fieldApiName] = event.detail.Contact_For_Lookup__c;
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));
const recordInput = { fields };
this.errorMessageList = [];
this.isShowErrorDiv = false;
updateRecord(recordInput)
.then(() => {
this.dispatchEvent(
new ShowToastEvent({
title: 'Success',
message: 'Opportunity updated',
variant: 'success'
})
);
}).catch(error => {
//
});
}
}
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(','));
}
}
handleReset(event) {
const inputFields = this.template.querySelectorAll(
'lightning-input-field'
);
if (inputFields) {
inputFields.forEach(field => {
field.reset();
});
}
}
}效果：项目Subject，Start Date，End Date实现了更改了label名称，但是有两个LookUp类型的项目，需要焦点放进去之后，自动搜索关联表的功能，所以建议使用【lightning-input-field】自带的功能，如果坚持使用【lightning-input】，就需要更加复杂的自定义开发。
现在客户的需求是，LookUp项目既需要自动搜索功能，label项目的名称也需要更改的情况下，怎么实现呢。
【variant="label-stacked"】→【variant="label-hidden"】
效果：
