如果未触摸字段，如何不显示错误消息

Question

如何显示"需要电子邮件"；如果字段已被触摸，则显示消息

<div class="form-group">
<label class="control-label">Email</label>
<input class="form-control w-100 mt-2" type="text" formControlName="login" required>
<span class="text-danger" *ngIf="form.controls.login.errors?.required">
Email is required
</span>
</div>

Answer 1

使用touched。

<span class="text-danger" *ngIf="form.controls.login.touched && form.controls.login.errors?.required">
Email is required
</span>

StackBlitz 上的示例演示

参考文献

验证模板驱动表单中的输入

Answer 2

您可以使用form.controls.login.touched

<div class="form-group">
<label class="control-label">Email</label>
<input class="form-control w-100 mt-2" type="text" formControlName="login" required>
<span class="text-danger" *ngIf="form.controls.login.touched && form.controls.login.errors?.required">
Email is required
</span>
</div>