I am trying to render lightning input equal to the number user enter in input box

Question

Component template (HTML)

<div class="slds-p-around_x-small">
    <lightning-input label="Name" value={rec.Name} onchange={handleNameChange}>test</lightning-input>
    <lightning-input type="Total Employees" value={rec.Total_No_of_Employee__c} label="Total Employees" onchange={handleEmpChange} required></lightning-input><br/>
    testing1234
    <template if:true={areDetailsVisible}>
        <lightning-input type="text" label="Type here" ></lightning-input>
    </template>
</div>

Component controller (JS)

export default class TotalEmployes extends LightningElement {

    @track name = NAME_FIELD;
    @track  employee=Total_No_of_Employee__c;
    @track accountId= Account_ID;
    @track areDetailsVisible = false;
    @track enablefield = false;
    rec = {
        Name : this.name,
        EmployeeNos :this.employee
    }

    handleNameChange(event) {
        this.rec.Name = event.target.value;
        console.log("name1", this.rec.Name);
    }


    handleEmpChange(event) {
        this.rec.EmployeeNos = event.target.value;
        /* if ( this.rec.EmployeeNos == '' ){
            alert( this.rec.EmployeeNos )
        }*/
        if(this.rec.EmployeeNos == null || this.rec.EmployeeNos == ''){
            this.areDetailsVisible = false;
        }else{  
            this.areDetailsVisible = true;
        }
    }
}

Problem: When I enter value in total employees only one time lightning input tag appears. help me to render the input box equals to the number user enter in total employee field.

Thanks in Advance

You have to have data that you can then iterate using a <template for:each>. See the documentation for details. — Phil W
– Phil W, Commented Aug 4, 2022 at 7:26

sfdcfox · Accepted Answer · 2022-08-04 13:46:30Z

You just need to create an array of values, then iterate over it in your markup.

<lightning-input for:each={employees} for:item="employee" key={employee.id} type="text" label="Type here" value={employee.name} data-id={employee.id} ></lightning-input>

...

this.rec.EmployeeNos = event.target.value;
const itemCount = parseInt(this.rec.EmployeeNos);
if(!isNaN(itemCount) && itemCount > 0) {
  this.employees = [...Array(itemCount).keys()].map((id) => ({ id, name: '' }));
} else {
  this.employees = [];
}

Stack Exchange Network

I am trying to render lightning input equal to the number user enter in input box

1 Answer 1

You must log in to answer this question.

Hot Network Questions

I am trying to render lightning input equal to the number user enter in input box

1 Answer 1

You must log in to answer this question.

Related

Hot Network Questions