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

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

您可以使用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>

Answer 2

和touched.

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

Sample Demo on StackBlitz

参考资料

Validating input in template-driven forms

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

How not to display an error message if the field was not touched?

bootstrap-4

angular

参考资料