3

モジュールを使用し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>
4

1 に答える 1