CODEWITHSUNDEEP
angulartypescript
DeadlyDan
DeadlyDan

Reputation: 699

Reset drop downs to default value after button click

I have a grid which is rendered in my template as shown below. The grid has multiple dropdowns (one per row) and I collect the values of these when I click a button. However after I click the button I want to reset all the drop downs to the default value. 

<div>
    <button (click)="onClickUpdate($event, filteredRequesters)">Update</button>
</div>
<tbody>
    <tr *ngFor='let requester of filteredRequesters'>
        <td>
          <select id="ddStatus" type="number" (change)="onChange($event.target.value, requester)">
             <option *ngFor="let level of levels">
    {{level.name}}</option>
          </select>
        </td>
        <td>{{ requester.RequesterID }}</td>
        <td> {{ requester.FullName }} </td>
        <td>{{ requester.CompanyName }}</td>
        <td>{{ requester.RequesterClass}}</td>
        <td>{{ requester.Address}}</td>
        <td>{{ requester.MobilePhone}}</td>
        <td>{{ requester.TotalRequests}}</td>
        <td>{{ requester.EmailAddress}}</td>
    </tr>
</tbody>

Here is the array that sets the options in the select drop down in the typescript component.

   levels: Array<{ num: number, name: string, total: number }> = [
    { num: 0, name: "ignore", total: 0 },
    { num: 1, name: "child", total: 0 },
    { num: 2, name: "parent", total: 0 }
   ];

And finally here is code for the button click:

 onClickUpdate(event, filteredRequesters) {

    var count: number;
    count = 0;

    for (var i = filteredRequesters.length - 1; i >= 0; i--) {
        if (count > 1) {
            continue;
        }

        if (filteredRequesters[i].isDisabled == 2)
            count++
    }

    if (count == 1) {
        this._productService.updateRequester(filteredRequesters);
        var countToRemove: number;
        // get new total requests for merged reqwester  
        var countIndex: number = 0;
        countToRemove = 0;
        for (var i = filteredRequesters.length - 1; i >= 0; i--)
            if (filteredRequesters[i].isDisabled == 1) {
                countToRemove += filteredRequesters[i].TotalRequests;
            }
            else if (filteredRequesters[i].isDisabled == 2)
                countIndex = i;

        filteredRequesters[countIndex].TotalRequests += countToRemove;
        filteredRequesters[countIndex].isDisabled = 0;

        for (var i = filteredRequesters.length - 1; i >= 0; i--)
            if (filteredRequesters[i].isDisabled == 1)
                filteredRequesters.splice(i, 1);
                // this._productService.getRequestersByFirsterLetter('a')
                // .subscribe(products => {
                //     this.products = products;
                //     this.filteredRequesters = this.products;
                // },
                // error => this.errorMessage = <any>error);
    }
    else alert("Only one parent allowed. ")       
}

Upvotes: 2

Views: 6283

Answers (1)

Vega
Vega

Reputation: 28708

If you don't wish to add form, then at least you can add ngModel to the select element to bind it value to a property and then reset it. Then you don't need to retreive (change), it's bound. Something like the following:

 <select id="ddStatus"  [(ngModel)]="selectedValues[i]" type="number">

where selectedValues is that property. Then you easily reset its values:

 reset(){
      this.selectedValues=["ignore","ignore","ignore"];
  }

call this.reset() from the button click method.

simplified demo

Upvotes: 1

Related Questions