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

How to display the "Email is required" message if a field has been touched

<div >
    <label >Email</label>
    <input  type="text" formControlName="login" required>
    <span  *ngIf="form.controls.login.errors?.required">
        Email is required
    </span>
</div>

CodePudding user response：

You can use form.controls.login.touched

<div >
        <label >Email</label>
        <input  type="text" formControlName="login" required>
        <span  *ngIf="form.controls.login.touched && form.controls.login.errors?.required">
            Email is required
        </span>
    </div>

CodePudding user response：

With touched.

<span  *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