如果字段为空，则角度表单禁用提交按钮

Question

听起来很简单，但我已经尝试了很多东西，但都没有奏效。

我正在使用 Angular 4，我的表单是模板驱动的：

<form #form="ngForm" novalidate>
    <label for="insz">{{ 'SEARCH_PAGE.searchInszNumber' | translate }}</label>
    <input type="text" name="insz" [placeholder]="'SEARCH_PAGE.searchInszNumber' | translate" #input required>
    <button (click)="onSearch(input.value)" ><span>{{'SEARCH_PAGE.search' | translate }}</span></button>
</form>

当（一个且唯一的）输入字段为空时，我想禁用该按钮。

Answer 1

您缺少ngModel输入，因为您的输入字段实际上是一个表单控件：

<input type="text" name="insz" ngModel
    [placeholder]="'SEARCH_PAGE.searchInszNumber' | translate" #input required>

然后，如果表单无效，您当然需要禁用该按钮：

<button [disabled]="!form.valid" (click)="onSearch(input.value)" >Submit</button>