根据输入更改按钮外观

Question

我有一个输入组如下：

  <div class="input-group" xmlns="">
    <input #searchField autofocus type="text" class="form-control"
           [(ngModel)]="searchValue" (keyup.enter)="doSearch(searchValue)">
    <button class="btn-primary fa fa-search" id="search-icon"
            (click)="doSearch(searchValue)"></button>
  </div>

我希望在用户在搜索字段中输入内容之前禁用该按钮。一旦用户在搜索字段中键入内容，我想将按钮的外观从图标更改为纯文本，即 'Search'。

我试过在输入元素上使用 (change)=someFunction()，但我不确定如何使用它来改变按钮属性。我可以使用特定指令来实现此目的吗？

非常感谢任何帮助。

Answer 1

首先定义对您的控件的引用，例如#searchVAlue，然后检查它是dirty 还是touched 以显示button 或span（ p、div 等）。

  <div class="input-group" xmlns="">
    <input #searchField autofocus type="text" class="form-control"
           [(ngModel)]="searchValue" #sv="ngModel" (keyup.enter)="doSearch(searchValue)">
    <button *ngIf="(sv.dirty || sv.touched)" class="btn-primary fa fa-search" id="search-icon"
            (click)="doSearch(searchValue)"></button>
    <span *ngIf="!(sv.dirty || sv.touched)">Your text here</span>

  </div>

你可以看到实现here。

根据输入更改按钮外观

change button appearance depending on input

angular-directive

angular