Lightning Web コンポーネント(LWC) lightning-inputのvalidationチェックサンプル

2023年8月8日

環境
Salesforce

使用例
ボタンを押下時に入力チェックをします。
1.htmlコード

<lightning-button style="text-align: right;" label="submit" onclick={validCheck}>
</lightning-button>

2.lightning-inputのvalidationチェックコード

isInputValid() {
  let isValid = true;
  let input = this.template.querySelectorAll('lightning-input');
  input.forEach(inputField => {
    if(!inputField.checkValidity()) {
      inputField.reportValidity();
      isValid = false;
    }
  });

  return isValid;
}

3.保存押下時にチェックメソッドを呼び出す

validCheck() {
  if(this.isInputValid()) {
    let input = this.template.querySelectorAll('lightning-input');
    input.forEach(inputField => {
      console.log('項目の入力値：' + inputField.value);
    })
  }
}