0

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

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

1 Answer 1

0

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 = [];
}

You must log in to answer this question.

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