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