Lightning-input vs lightning-input-field

Question

I am facing issues with using both Lightning-input and lightning-input-field. Some of my requirements are satisfied with Lightning-input and some with lightning-input-field.Here are issues faced.

Issue when using lightning-input: Since I am handling the data my self, I am getting errors while displaying multiselect picklist fields. So my team mate suggested using lightning-input-field and salesforce will handle displaying and saving data.

Issue when using lightning-input-field: I have to do some custom validations(make some fields required based on other fields input) and it is causing issues. Also I need the form to be in view mode and then edit mode on click of edit button. When i give mode as read only, these fields are not showing up.

I am not able to decide what to use. Please help me with it.

Here is my code : html

<template>
    <lightning-record-edit-form record-id={recordId} object-api-name={objectApiName} onsuccess={handleSuccess}>
        <lightning-messages></lightning-messages>
        <template for:each={fieldList} for:item="field">
            <div key={field} class="slds-grid" if:false={showEditField}>
                <div class="slds-col slds-size_11-of-12">
                    <lightning-output-field field-name={field}>
                    </lightning-output-field>
                </div>
                <div class="slds-col slds-size_1-of-12">
                    <lightning-button-icon icon-name="utility:edit" onclick={handleEdit}>
                    </lightning-button-icon>
                </div>
            </div>
            <div key={field} class="slds-grid" if:true={showEditField}>
                <div class="slds-col slds-size_1-of-1">
                    <lightning-input-field field-name={field}>
                    </lightning-input-field>
                </div>
            </div>
        </template>
        <lightning-button type="submit" name="submit" label="Save">
        </lightning-button>
    </lightning-record-edit-form>
</template>

js

import { LightningElement, api } from 'lwc';
export default class ChildRunway extends LightningElement {
    @api fieldList = ["Name", "Id", "somefield1", "somefield2"]; //harcoded the values assuming objectApiName is Account for demo purpose
    showEditField;
    @api recordId;
    @api objectApiName;
    handleSuccess(event) {
        this.showEditField = false;
    }
    handleEdit() {
        this.showEditField = !this.showEditField;
    }
}

I have an apex class that gets me the record Id needed for this ChildRunway and that is being sent from Parent LWC.

Html of parent:

<c-child-runway record-id={recordId} object-api-name="Transaction"></c-child-runway>

So the validations I need to do are:

1. Some fields are required fields and it is not showing as required in the UI
2. Somefield1 is a picklist and when one of the values is selected, somefield2 should be shown as required field.
3. Somefiled2 should be validated as 10 digit number (I tried adding a validation rule on that field and it was always expecting this field to have 10 digit number. Since it is not a required field for some options, that will not help me)