проверка триггера ng2-validation после взаимодействия пользователя с формой

Я использую модуль ng2-validation для проверки своей формы, и он нормально работает с проверками. Проблема в том, что когда я загружаю страницу, форма появляется с ошибками проверки, даже если я никогда не касаюсь формы, поэтому мне нужно, чтобы проверка выполнялась после того, как пользователь использует форму, а не при загрузке страницы.

вот мой шаблон формы:

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

person efirvida    schedule 21.11.2017    source источник


Ответы (1)


Если вы хотите отображать ошибки проверки при касании поля, просто используйте touched:

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

Это покажет ошибку после того, как пользователь посетил поле и поле потеряет фокус. Если вы хотите, чтобы сообщение отображалось после того, как пользователь что-то ввел в поле, используйте dirty.

person AJT82    schedule 21.11.2017
comment
@david, проверил и дал вам ответ, надеюсь, он вам подходит :) - person AJT82; 22.11.2017