根据输入更改按钮外观

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>

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

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

非常感谢任何帮助。

Answer 1

首先定义对您的控件的引用，比如#searchVAlue，然后检查它是dirty还是touched来显示button或span（{{ 1}}，p等。）

div

您可以看到实施here。