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

时间:2017-06-28 14:06:58

标签: forms angular

听起来很简单,但我已经尝试了很多东西而且都没有用。

我正在使用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>

我想在(唯一的)输入字段为空时禁用该按钮。

2 个答案:

答案 0 :(得分:3)

您输入中缺少ngModel,因为您的输入字段实际上是表单控件:

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

然后如果表单无效,则需要禁用该按钮:

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

答案 1 :(得分:0)

您可以查看reactive forms。直到一周前我才知道它们,但它们是如此强大!

这意味着您需要做的就是在您的情况下添加ValidatorValidators.required),并在按钮中添加禁用条件。就是这样,你就定了。