Question

我有一个搜索框和一个搜索按钮。我需要禁用按钮，直到用户提供搜索词，但该按钮始终处于禁用状态。我有以下代码：

 <input type='text' [(ngModel)]='listFilter' />
 <button [disabled]="!listFilter" class="btn btn-primary"(click)='OnSearch(listFilter)'>
      Search
 </button>

这里有什么问题？我正在使用角度4

Answer 1

在输入标记内添加name属性。

 <input type='text' [(ngModel)]='listFilter' name="listFilter"/>
            <button [disabled]="!listFilter" class="btn btn-primary" (click)='OnSearch(listFilter)'>Search</button>

Answer 2

您必须使用模板参考变量！

为此，您可以使用 ref-prefix 或 #prefix 。在您的示例中，您将必须像这样修改它：

<input ref-filter type='text' [(ngModel)]='listFilter' />
<button [disabled]="!filter.value" class="btn btn-primary" (click)='OnSearch(listFilter)'>
 Search 
</button>

模型参考变量（#varRef）与模型输入变量（变量let）不同，正如您在* ngFor中看到的那样。参考变量的范围是整个模型。在同一模型中，请勿多次设置相同的变量名称。执行值将不可预测。

更多文档在这里：https://angular.io/guide/template-syntax

Answer 3

<input ref-filter type='text' [(ngModel)]='listFilter' />
<button class="btn btn-primary" [disabled]="listFilter === ''"(click)="ClearText()">Reset User</button>

TS：

listFilter='';
ClearText(){
this.listFilter='';

}

如果输入字段为空，则使用角度4禁用按钮单击

3 个答案: