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

Improve this question
1
  • @sfdcfox Please have a look Commented Oct 13, 2022 at 14:31

2 Answers 2

Reset to default
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"]

Improve this answer
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]"}
Improve this answer
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? Commented 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. Commented Oct 14, 2022 at 6:54
  • @ShinjiJapan I will try and keep you posted Commented 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! Commented Oct 28, 2022 at 13:53

You must log in to answer this question.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.