带有重复文本的Angular 4搜索框

Question

Angular 4 serach box issue

当我们在一个文本框中输入值时，如何停止第二个搜索框文本中的值。我们在页面中的每个项目都有多个搜索框。当我们在一个搜索框中键入任何文本时，相同的值将绑定到所有搜索框的其余部分。如何避免这种情况

<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

[[（ngModel）]和“名称”的问题尝试为各个输入框提供唯一的值

 <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>