I'm trying to make fields are mandatory to fill, but its not working with lightning-input-field
How to achieve it with lightning-input-field
<lightning-record-edit-form object-api-name="Sytems__c">
<template for:each={defaultFields} for:item="field">
<lightning-input-field required class="requiredField" key={field.name} variant="label-stacked" name={field.name} field-name={field.name}
onchange={handleNineFieldValueChange}>
</lightning-input-field>
</template>
<lightning-button variant="brand" title="submit" onclick={validateFields} label="Save">
</lightning-button>
</lightning-record-edit-form>
.JS Code below
validateFields(){
const isInputsCorrect = [...this.template.querySelectorAll('lightning-input-field')]
.reduce((validSoFar, inputField) => {
inputField.reportValidity();
return validSoFar && inputField.checkValidity();
}, true);
if (isInputsCorrect) {
//perform success logic
}
}
ERROR
Uncaught TypeError: t.checkValidity is not a function throws
Best Answer
Straight from the documentation:
Requiring a Value for a Field
for this to work, you need to add the
required
attribute to the component.Furthermore, if you need to add custom validation, you will need to add your custom handlers when the form is submitted, and manually perform the operation. You can achieve this by Overriding Default Behaviors of the record-edit-form as specified in the documentation