【Aura】lightning:inputの項目をhiddenにする

lightning:inputコンポーネントはAuraの中でも特におなじみのコンポーネントだと思います。input項目を作成するコンポーネントで、type属性にはtextやcheckboxなどを指定できます。

lightning:input のtype属性に設定できる値ですが、htmlのinputタグのtype属性とは似ているようでかなり異なります。私が少しつまずいたのはhidddenを設定できないことでした。調べてみたところ一応<input type=”hidden”>に近いことができることがわかりました。

<lightning:input name="id" value="{!v.xxxx.Id}" class="slds-hidden"/>

上のように class=”slds-hidden” を追加すれば画面に表示されなくなります。

ただしhtmlのinput type=”hidden”とは少し異なるようで、上のコードを配置すると画面のレイアウトがずれることがあるので注意が必要です。

なお、以下のサイトを参考にしました。

https://salesforce.stackexchange.com/questions/204745/how-to-create-a-hidden-input-field-in-a-lightning-component