lwc スクリプトでのバリデート情報取得
■入力時とかに何かしたい時
https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#the-constraint-validation-api
handleChanges(event){
console.log(event.target);
console.log(event.target.name);
console.log(event.target.value);
if(event.target.name == 'test') {
this.test = event.target.value;
var elem = this.template.querySelector("lightning-input[data-item-id='test']");
//エレメントからタグで定義したバリデーションの結果取得
console.log(elem.validity.typeMismatch);
console.log(elem.validity.valueMissing);
console.log(elem.validity.tooLong);
console.log(elem.validity.tooShort);
console.log(elem.validity.stepMismatch);
console.log(elem.validity.badInput);
}
}
■保存前とか一括の場合
https://www.salesforcepoint.com/2020/09/validate-lwc-input-data-how-to-add.html
saveContact() {
const isInputsCorrect = [...this.template.querySelectorAll('lightning-input')]
.reduce((validSoFar, inputField) => {
inputField.reportValidity();
return validSoFar && inputField.checkValidity();
}, true);
if (isInputsCorrect) {
//perform success logic
}
}