CODEWITHSUNDEEP
angularangular-validation
efirvida
efirvida

Reputation: 4855

ng2-validation trigger validation after user interact with the form

I'm using the ng2-validation module to validate my form, and it´s working ok with the validations. The problem is that when I load the page the form appear with the validation errors, even if i never touch the form, so I need that the validations occurs after the user use the form, and not on the page load.

here is my form template:

<form class="form" id="contact-form" #contactForm="ngForm" (ngSubmit)="onSubmit()">

  <input type="hidden" name="your-subject" [(ngModel)]="model.subject" #subject="ngModel">

  <div class="form-group" [ngClass]="{'has-danger': name.errors?.required}">
    <input class="form-control" type="text" placeholder="Nombre" name="your-name"
           [ngClass]="{'form-control-danger': name.errors?.required}"
           [(ngModel)]="model.name"
           #name="ngModel" required>
  </div>
  <label *ngIf="name.errors?.required" id="name-error" class="error help-block" for="name">
    Introduzca su nombre
  </label>

  <div class="form-group" [ngClass]="{'has-danger': phone.errors?.number}">
    <input class="form-control" type="text" placeholder="Teléfono" name="your-phone"
           [ngClass]="{'form-control-danger': phone.errors?.number}"
           [(ngModel)]="model.phone"
           #phone="ngModel" number>
  </div>
  <label *ngIf="phone.errors?.number" id="phone-error" class="error help-block" for="phone">
    Introduzca número de télefono válido
  </label>

  <div class="form-group" [ngClass]="{'has-danger': email.errors?.required || email.errors?.email }">
    <input type="text" placeholder="Email" name="your-email" class="form-control"
           [ngClass]="{'form-control-danger': email.errors?.required || email.errors?.email}"
           [(ngModel)]="model.email"
           #email="ngModel" email required>
  </div>
  <label *ngIf="email.errors?.required" id="email-error" class="error help-block" for="email">
    Introduzca su correo electrónico
  </label>
  <label *ngIf="email.errors?.email && !email.errors?.required" id="email-error" class="error help-block" for="email">
    Introduzca un correo electrónico válido
  </label>

  <div class="form-group" [ngClass]="{'has-danger': message.errors?.required }">
    <textarea rows="4" placeholder="Mensaje" name="your-message" class="form-control"
              [ngClass]="{'form-control-danger': message.errors?.required }"
              [(ngModel)]="model.message"
              #message="ngModel" required></textarea>
  </div>
  <label *ngIf="message.errors?.required" id="message-error" class="error help-block" for="message">
    Déjenos su mensaje
  </label>

  <div class="form-group">
    <label class="btn-label" for="input-btn">
      <input class="btn-input" type="submit" value="enviar" id="input-btn" [disabled]="!contactForm.form.valid">
    </label>
  </div>

</form>

Upvotes: 3

Views: 307

Answers (1)

AVJT82
AVJT82

Reputation: 73337

If you want to show the validation errors when a field has been touched, you just use touched:

<label *ngIf="name.errors?.required && name.touched">
  Introduzca su nombre
</label>

This will show the error after user has visited the field and the field looses focus. If you rather want to show the message after user has entered something in field, use dirty.

Upvotes: 2

Related Questions