Angular2 input data getting lost on button click

Question

I have created Angular2 code like this to get the data on button click

    <div class="field-panel">
        <div>
          <span>
             <input #newData [(ngModel)]="data.id" type="text" >
             <select #newCategory [(ngModel)]="i.index" class="input-bars">
              <option *ngFor="let data of field" [value]="data.value">{{data.value}}</option>
            </select>
          </span>
        <button class="btn btn-success (click)="addData(newData.value, newCategory.value)">ADD</button>
         </div>
    </div>

    addData(value, dropValue){

        this.Data[index] = value;
    }

But when the button is clicked the data on the input field is getting lost in ui. How to keep it when the button is clicked and display on the ui as well??

Could you please post your addData and the essentials of your html that the button is contained in? — silentsod
– silentsod, Commented Nov 3, 2016 at 16:28
@silentsod i'm using the select dropdown as well, I have edited the code — Kokulan
– Kokulan, Commented Nov 3, 2016 at 16:44
Honestly, I don't know what you're trying to accomplish with your code, but here's a stab with a plunker, you'll note that clicking add doesn't clear any input fields: plnkr.co/edit/xTBSLfnxDvYXGHM4zjFa?p=preview — silentsod
– silentsod, Commented Nov 3, 2016 at 17:02
I know the reason it's becuase you are using push to store the details to the array and i'm using this.Data[index] = value; this to store the data to array — Kokulan
– Kokulan, Commented Nov 3, 2016 at 17:07

silentsod · Accepted Answer · 2016-11-03 16:22:50Z

1

I'll hazard a guess that you're working in a form, so add type="button" to the button <button class="btn btn-success" (click)="addData(newData.value)">ADD</button>. That should prevent it from thinking the form is submitting and clearing the data.

answered Nov 3, 2016 at 16:22

silentsod

8,35545 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular2 input data getting lost on button click

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related