この文章は Salesforce 機械翻訳システムを使用して翻訳されました。詳細はこちらをご参照ください。

lightning:inputAddress

住所複合項目を表します。このコンポーネントでは、API バージョン 42.0 以降が必要です。

lightning:inputAddress コンポーネントは、text 型の HTML input 要素として表される住所複合項目です。国項目と��道府県項目は入力項目またはドロップダウンメニューにすることができます。countryOptions と provinceOptions が指定されていない場合は、入力項目が表示されます。

次の例では、町名・番地、市区郡、都道府県、郵便番号、国の項目を含む住所複合項目を作成します。

1<aura:component>
2    <div style="max-width: 400px;">
3        <lightning:inputAddress
4            aura:id="myaddress"
5            addressLabel="Address"
6            streetLabel="Street"
7            cityLabel="City"
8            countryLabel="Country"
9            provinceLabel="State"
10            postalCodeLabel="PostalCode"
11            street="1 Market St."
12            city="San Francisco"
13            country="US"
14            province="CA"
15            postalCode="94105"
16            required="true"
17        />
18    </div>
19</aura:component>

国と都道府県のドロップダウンメニューを作成するには、表示ラベル - 値ペアの配列を countryOptions と provinceOptions に渡します。country 値と province 値がドロップダウンメニューのデフォルト値として使用されます。

1<aura:component>
2    <aura:attribute name="provinceOptions" type="List" default="[
3        {'label': 'California', 'value': 'CA'},
4        {'label': 'Texas', 'value': 'TX'},
5        {'label': 'Washington', 'value': 'WA'},
6    ]"/>
7    <aura:attribute name="countryOptions" type="List" default="[
8        {'label': 'United States', 'value': 'US'},
9        {'label': 'Japan', 'value': 'JP'},
10        {'label': 'China', 'value': 'CN'},
11    ]"/>
12    <div style="max-width: 400px;">
13        <lightning:inputAddress
14            aura:id="myaddress"
15            addressLabel="Address"
16            streetLabel="Street"
17            cityLabel="City"
18            countryLabel="Country"
19            provinceLabel="Province/State"
20            postalCodeLabel="PostalCode"
21            street="1 Market St."
22            city="San Francisco"
23            country="US"
24            countryOptions="{! v.countryOptions }"
25            provinceOptions="{! v.provinceOptions }"
26            postalCode="94105"
27            required="true"
28        />
29    </div>
30</aura:component>

または、組織で州選択リストと国選択リストを有効にして、Apex コントローラを介して値にアクセスすることもできます。詳細は、Salesforce ヘルプの「選択リストからの州と国の選択の許可」を参照してください。

使用上の考慮事項

required="true" を設定すると、必須であることを示す赤いアスタリスクがすべての住所項目に表示されます。ユーザが項目を操作し、空白のままにした場合は、項目の下にエラーメッセージが表示されます。required 属性は適用されないため、住所複合項目を含むフォームを送信する前に検証する必要があります。

たとえば、handleClick コントローラアクションをコールする lightning:button コンポーネントがある場合、ユーザが項目に値を入力せずにボタンをクリックしたときにエラーメッセージを表示することができます。

1({
2    handleClick: function (cmp, event) {
3        var address = cmp.find("myaddress");
4        var isValid = address.checkValidity();
5        if(isValid) {
6            alert("Creating new address");
7        }
8        else {
9            address.showHelpMessageIfInvalid();
10        }
11    }
12})

属性

属性名	属性型	説明
`addressLabel`	String	住所複合項目の表示ラベル。
`body`	Component[]	コンポーネントのボディ。マークアップでは、これはタグのボディに含まれるすべてを指します。
`city`	String	住所の市区郡項目。
`cityLabel`	String	住所の市区郡項目の表示ラベル。
`class`	String	コンポーネントの基本クラスに加え、外部要素の CSS クラス。
`country`	String	住所の国項目。countryOptions が指定されている場合は、デフォルトでこの国値が選択されます。
`countryLabel`	String	住所の国項目の表示ラベル。
`countryOptions`	List	国の表示ラベル - 値ペアの配列。オプションのドロップダウンメニューを表示します。
`disabled`	Boolean	住所項目が無効かどうかを指定します。この値のデフォルトは false です。
`onblur`	Action	入力がフォーカスを解放したときにトリガされるアクション。
`onchange`	Action	値が変更された場合にトリガされるアクション。
`onfocus`	Action	入力にフォーカスが設定されたときにトリガされるアクション。
`postalCode`	String	住所の郵便番号項目。
`postalCodeLabel`	String	住所の郵便番号項目の表示ラベル。
`province`	String	住所の都道府県項目。provinceOptions が指定されている場合は、デフォルトでこの都道府県値が選択されます。
`provinceLabel`	String	住所の都道府県項目の表示ラベル。
`provinceOptions`	List	都道府県の表示ラベル - 値ペアの配列。オプションのドロップダウンメニューを表示します。
`readonly`	Boolean	住所項目が参照のみかどうかを指定します。この値のデフォルトは false です。
`required`	Boolean	住所項目が必須かどうかを指定します。この値のデフォルトは false です。
`street`	String	住所の町名・番地項目。
`streetLabel`	String	住所の町名・番地項目の表示ラベル。
`title`	String	マウスポインタが要素に重ねられたときにツールチップテキストを表示します。
`variant`	String	バリエーションによって複合項目の外観が変更されます。使用できるバリエーションは standard と label-hidden です。この値のデフォルトは standard です。

Lightning コンポーネント開発者ガイド

lightning:inputAddress

属性