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で設定した値で割りきれない

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

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

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

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