lightning-record-form
やlightning-record-edit-form
を使わずに、プルダウンに選択リスト項目を使用するTipsです。
lightning-record-form
についてはこちら。
選択リストの選択肢を項目定義から取得する
wireサービスを使用することでApexコードなしに選択リストの選択肢を使用することができます。
<template>
<div lwc:if={industryOptions.data} class="wrapper">
<lightning-combobox
label="業種"
options={industryOptions.data.values}
></lightning-combobox>
</div>
</template>
import { LightningElement, wire } from 'lwc';
import { getPicklistValues, getObjectInfo } from 'lightning/uiObjectInfoApi';
import ACCOUNT_OBJECT from '@salesforce/schema/Account';
import ACCOUNT_INDUSTRY_FIELD from '@salesforce/schema/Account.Industry';
export default class Sample extends LightningElement {
@wire(getObjectInfo, { objectApiName: ACCOUNT_OBJECT })
accountObjectInfo;
@wire(getPicklistValues, { recordTypeId: '$accountObjectInfo.data.defaultRecordTypeId', fieldApiName: ACCOUNT_INDUSTRY_FIELD })
industryOptions;
}
選択なしを追加する
選択なしを追加する場合は、getPicklistValuesで取得したリストに空の値を追加する必要があります。
get _industryOptions() {
return [
{ label: "--なし--", value: "" },
...this.industryOptions.data.values
];
}
画面から入力された値を取得する
comboboxに限らないですが、画面から入力された値を変数に代入するときは、onchange
のイベント属性を使用します。
初期値を設定する場合はvalue属性を使用します。
入力項目が多い場合はdata属性を使用するとコードの記述量を減らすことができます。
<template>
<div lwc:if={industryOptions.data} class="wrapper">
選択した値:{account.Industry}
<lightning-combobox
label="業種"
options={_industryOptions}
data-field-name="Industry"
value={account.Industry}
onchange={handleChange}
></lightning-combobox>
</div>
</template>
@track account = {
Industry: ""
};
handleChange(event) {
this.account = {
...this.account,
[event.target.dataset.fieldName]: event.detail.value
};
}
バリデーションを実施する
data属性とquerySelectAllを使ってバリデーションを実装できます。
<template>
<div lwc:if={industryOptions.data} class="wrapper">
選択した値:{account.Industry}
<lightning-combobox
data-id="input"
label="業種"
options={_industryOptions}
data-field-name="Industry"
value={account.Industry}
onchange={handleChange}
required
></lightning-combobox>
<lightning-button label="OK" variant="brand" onclick={handleClick}></lightning-button>
</div>
</template>
handleClick() {
this.validate();
}
validate() {
return [...this.template.querySelectorAll('[data-id="input"]')].reduce((validSoFar, inputCmp) => {
// inputCmp.setCustomValidity(''); カスタムバリデーションを使用している場合はリセットする必要がある。使用していない場合は不要。
inputCmp.reportValidity();
return validSoFar && inputCmp.checkValidity();
}, true);
}