見出し画像

Lightning Web Componentsでコントロールのエラー状態をチェックする

Lightning Web Componentsでコントロールのエラー状態をチェックする方法をご紹介します。

例えば、lightning-inputで以下のように書きます。

<lightning-input class='quantity-input' max="999" type="number" min="0" style="text-align: right;" value={_orderDetail.Quantity} step={_orderDetail.OrderUnitNumber} onchange={handleChangeQuantity}></lightning-input>

この場合、以下の場合にエラー状態になります。

・入力された値が0未満
・入力された値が1000以上
・入力された値がstepで設定した値で割りきれない

見た目としては、以下のようになります。

画像1

では、この状態をコードで確認するには、どうしたらいいでしょうか?

以下のように、コントロールのvalidity.validを見ると判別できます。trueだと正常、falseだとエラーです。

const input = this.template.querySelector('.quantity-input');
if(input.validity.valid) {
   ret = true;
}
else {
   ret = false;
}


この記事が気に入ったら、サポートをしてみませんか?
気軽にクリエイターの支援と、記事のオススメができます!
生涯現役なデベロッパーを目指しています。Typescript、Javascript、Salesforceのフルスタックデベロッパーとして日々コードを綴っています。コードを綴る中で、「これは!?」と思ったものを記事にしています。
コメントを投稿するには、 ログイン または 会員登録 をする必要があります。