ユーザーがフォームと対話した後のng2検証トリガーの検証

Question

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> 

Answer 1

あなたはフィールドがタッチされたとき、検証エラーを表示したい場合は、あなただけtouchedを使用します。

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

これが表示されますユーザーがフィールドにアクセスしてフィールドがフォーカスを失った後のエラー。ユーザーがフィールドに何かを入力した後にメッセージを表示する場合は、dirtyを使用します。