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

Question

How to display the "Email is required" message if a field has been 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.errors?.required">
        Email is required
    </span>
</div>

Really I hate write always the codition, So, some time ago, I made a "component error" in this [SO](https://stackoverflow.com/questions/57741343/angular-forms-how-to-avoid-multiple-ngif-divs-for-validation-error-messages/57744709#57744709), but all the others answer are ok — Eliseo, Dec 16 '21 at 22:46

score 0 · Answer 1 · answered Dec 16 '21 at 11:45

You can use 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>

score 0 · Accepted Answer · answered Dec 16 '21 at 11:46

0

With touched.

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

Sample Demo on StackBlitz

References

Validating input in template-driven forms

answered Dec 16 '21 at 11:46

Yong Shun

35,286
4
24
46

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

2 Answers2

References