0

Can I use lightning-inputfield and lightning-input in the same form and submit? In below code, phone field value is not saved in the lead record. not just the phone I have some more fields that I need to set values before saving this record along with phone. Any inputs please?

<lightning-record-edit-form object-api-name="Lead">
      <lightning-input label="Phone" class="inputCmp" field-name="Phone"  value={leadRecord.Phone} pattern="^\s*(?:\+?(\d{1,3}))?[-. (]*(\d{3})[-. )]*(\d{3})[-. ]*(\d{4})(?: *x(\d+))?\s*$" message-when-pattern-mismatch="Please enter a valid phone number" onchange={handleChange} maxlength="10" onfocusout= "{validate}" > </lightning-input>
      <lightning-input-field field-name="Email" value={leadRecord.Email} onchange={handleChange} required> </lightning-input-field>

     <lightning-button
     onclick={handleSuccess}
    label="Create Lead"
   ></lightning-button>
 </lightning-record-edit-form>

handleChange(event) {
    // alert(event.target.value);
    this.leadRecord[event.target.name] = event.target.value;

}
handleSuccess(event) {
    const fields = this.leadRecord;
    console.log(this.leadRecord);
    const recordInput = { apiName: LEAD_OBJECT.objectApiName, fields };
    alert(recordInput);
    createRecord(recordInput)
        .then((lead) => {
            this.leadId = lead.id;
            this.dispatchEvent(
                new ShowToastEvent({
                    title: "Success",
                    message: "Account created successfully!",
                    variant: "success"
                })
            );
            this.leadRecord = {};
        })
        .catch((error) => {
            this.dispatchEvent(
                new ShowToastEvent({
                    title: "Error creating record",
                    message: " ",
                    variant: "error"
                })
            );
        })
        .finally(() => {

        });

update:

&nbsp;<lightning-input label="Phone" class="inputCmp" name="Phone"  value={leadRecord.Phone} pattern="^\s*(?:\+?(\d{1,3}))?[-. (]*(\d{3})[-. )]*(\d{3})[-. ]*(\d{4})(?: *x(\d+))?\s*$" message-when-pattern-mismatch="Please enter a valid phone number" onchange={handleChange} maxlength="10" onfocusout= "{validate}" > </lightning-input>

I tired to test adding an alert  

alert(this.leadRecord[Phone]);



enter image description here

1
  • @sfdcfox Please have a look
    – Mentee
    Oct 13, 2022 at 14:31

2 Answers 2

2

All you need is to add the name attribute in your lightning-input and lightning-input-field like below:-

<template>
    <lightning-record-edit-form object-api-name="Lead">
        <lightning-input label="Phone" name="Phone" onchange={handleChange}>
        </lightning-input>
        <lightning-input-field field-name="Email" name="Email" onchange={handleChange} required>
        </lightning-input-field>
    </lightning-record-edit-form>
</template>

and then in onchange handler:-

import { LightningElement } from 'lwc';
export default class InputAndInputField extends LightningElement {
    leadRecord = {};
    handleChange(event) {
        this.leadRecord[event.target.name] = event.target.value;
    }
}

you were using field-name attribute instead of name. Also you should keep field-name in lightning-input-field as well apart from name attribute. field-name is not required in lightning-input only.

Update Based on Question Update

You are trying to alert this.leadRecord[Phone] but you have missed adding the quotes in Phone

the right way to do is this.leadRecord["Phone"]

0
0

This link will help.

recordEditFormStaticAccount.js enter link description here

  1. call event.preventDefault() in handleSubmit (for cancel submit)
  2. submit lightning-record-edit-form with JSON value as {Phone:"000-1111-2222", Email:"[email protected]"}
4
  • How does this answer the question? E g. does the presence of event.preventDefault make it possible to use the two controls mentioned in the question at the same time? Oct 14, 2022 at 6:20
  • 1
    lightning-input-field value is preset in "event.detail.fields" const fields = event.detail.fields; and then you can add lightning-input value to fields. fields.Phone = this.template.querySelector("lightning-input").value; and manually submit with fields. this.template.querySelector('lightning-record-edit-form').submit(fields); this makes you possible to save lightning-input value and lightning-input-field value. Oct 14, 2022 at 6:54
  • @ShinjiJapan I will try and keep you posted
    – Mentee
    Oct 15, 2022 at 12:44
  • @ShinjiJapan it worked! can you elaborate and answer so i can make it as a answer, it will help others. Thanks!
    – Mentee
    Oct 28, 2022 at 13:53

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .