CODEWITHSUNDEEP
angular
J M
J M

Reputation: 1

Textbox inside ng-for only showing when there is data

I am working on angular. I have some text boxes in the page and on clicking a button I am selecting data from database and showing it in the textbox.

The textbox is not visible until I show the data, I am new in angular please help

Code in ts:

addItems(value: any) {
    this.items = new IComboDetails(value.ItemID, value.ItemCode, value.ItemDescription, value.PackingtypeID, value.PackingtypeName, value.quantity);
    this.stockitems.push(this.items);   
}

My textbox code:

   <div class="col-md-12 col-sm-12 col-xs-12">

       <div *ngFor="let match of stockitems">
           <input type="text" class="form-control" placeholder="Item Code" required="" [(ngModel)]="match.ItemCode" value="{{match.ItemCode}}" />
       </div>
   </div>

button code :

<input type="button" value="Add Item" class="btn btn-success" (click)="addItems(newStockoutForm.value);newStockoutForm.reset()" />

I don't need the ngFor loop, I just return only one data, but I don't know how to load that.

Upvotes: 0

Views: 584

Answers (2)

Akhil
Akhil

Reputation: 381

<ng-container *ngIf="!itemdetails || itemdetails.length == 0">
<label>Item Code</label> 
<input type="text" class="form-control" name="temporaryField"  /> 
</ng-container>

<div *ngIf="itemdetails && itemdetails.length > 0"> 

<ng-container *ngFor="let item of itemdetails"> 
<label>Item Code</label> 
<input type="text" class="form-control" id="itemcode" name="itemcode" [value]="item.ItemCode" required /> 
</ng-container> 
</div>

<br/><br/>
<button (click)="addItem()">Add Item</button>
</div>
  `
})

Upvotes: 1

yanky_cranky
yanky_cranky

Reputation: 1363

As you mentioned, you have following requirements :

1) Only one textbox.

2) model value should be populated from server-end.

3) should show empty textbox in DOM, until model value received.

you can do the following to resolve:

1) Data-structure array is wrong for this scenario, since you will only have one value

 item={ItemCode:''}; // whatever fields in this object, empty on page-load
  addItems(value: any) {     
   this.item.ItemCode=value;   // map the corresponding value to the model
  }

2) No need to loop, simply map the model

<div>
    <input type="text" class="form-control" placeholder="Item Code [(ngModel)]="item.ItemCode" value="{{item.ItemCode}}" />
  </div>

3) Populate model on click

<input type="button" value="Add Item" class="btn btn-success" (click)="addItems(newStockoutForm.value);newStockoutForm.reset()" />

Upvotes: 0

Related Questions