如果输入无效，则禁用按钮

Question

我有一个很长的表单，但我想禁用一个特定的按钮(在模板上，我不想在组件上这样做(，只有当特定的字段为空或有一些验证错误时，这是我的表单示例：

<form #myForm="ngForm">
<div class="form-group">
<label>Email</label>
<input [(ngModel)]="email" #email="ngModel" name="my_email" type="text" class="form-control" required>
<span *ngIf="email.errors?.required">
This field is required
</span>
</div>
<button [disabled]="myForm.email.errors?.required">Some action</button> 
</form>

我不需要有一个完整的有效表格来禁用该按钮，我只想根据特定输入的值进行检查。

我该怎么做？我错过了什么？

Answer 1

1-将模板变量#email重命名为#emailInput或与模型属性名称"email"不同的任何名称。。

<input [(ngModel)]="email" #emailInput="ngModel" name="my_email" type="text" class="form-control" required>

2-在按钮的禁用属性和显示错误的范围中使用模板变量#emailInunt。

<button [disabled]="emailInput.errors?.required">Some action</button>
<span *ngIf="emailInput.errors?.required">
This field is required
</span>

完整代码：

<form #myForm="ngForm">
<div class="form-group">
<label>Email</label>
<input [(ngModel)]="email" #emailInput="ngModel" name="my_email" type="text" class="form-control" required>
<span *ngIf="emailInput.errors?.required">
This field is required
</span>
<button [disabled]="emailInput.errors?.required">Some action</button> 
</div>
</form>

在Stacklitz 上试用