Angular 4 search box with duplicate text

Question

Angular 4 serach box issue

How to stop the value in second search box text when we enter value in one text box. we have multiple searchbox for each of the item in my page.when we type any text in one search box the same value is getting binded to rest of all the search boxes. how to avoid this

<div class="search-container">
<div class="form-searchbox">
    <form>
          <input [(ngModel)]="studentSearchSvc.searchTerm"   
               #searchElement
               type="text"
               name="userSearch"
               class="form-control"
               placeholder="studentName"
               autocomplete="off" />      
        <span class="search-icon" (click)="onButtonClick()"/> 
    </form>
</div>

]1

Answer 1

The issue from "[(ngModel)]" and "name" Try to give unique values for the individual input boxes

 <div class="search-container">
     <div class="form-searchbox">
      <form>
          <input [(ngModel)]="studentSearchSvc.searchTerm"   
               #searchElement1
               type="text"
               name="userSearch1"
               class="form-control"
               placeholder="studentName"
               autocomplete="off" />      
        <span class="search-icon" (click)="onButtonClick()"/> 
      </form>
    </div>


    <div class="search-container">
     <div class="form-searchbox">
      <form>
          <input [(ngModel)]="studentSearchSvc.searchTerm2"   
               #searchElement2
               type="text"
               name="userSearch2"
               class="form-control"
               placeholder="studentName"
               autocomplete="off" />      
        <span class="search-icon" (click)="onButtonClick()"/> 
      </form>
    </div>