Trying to take make fields mandatory `lightning-input-field`

Question

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

Answer 1

Straight from the documentation:

Requiring a Value for a Field

lightning-input-field supports requiredness specified on the server and client. In record forms, a required field is displayed with a red asterisk next to the field label. If you interact with a required field but don't enter a value, an error message is displayed below the field. Similarly, if you don't interact with a required field and try to submit the form, an error message is displayed.

To make an input field required on the server, mark the field Required in Setup. Input fields set as required on the server are universally required, to be displayed with a red asterisk wherever the input fields are used. For more information, see Require Field Input to Ensure Data Quality in Salesforce help.

To make an input field required on the client only, include the required attribute in lightning-input-field. Use this attribute if you want to require a value in a field before the form can be submitted, and the field isn't marked required in Setup. If the field doesn't have a value, the component's client-side validation catches the error before the form data is submitted to the server.

The client-side required setting and validation for requiredness is unrelated to the Required setting on the server. Note that you can't set required to false to disable the required setting on the server. The required field is still displayed with a red asterisk.

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