Trigger-Formular-Validierung bei Submit Angular4

Question

Ich entwarf eine Vorlage getriebene Form mit Angular und ionischen, die einige benutzerdefinierte (Onblur) Validierung hat.

Jetzt möchte ich Formular Validierung auslösen, wenn Sie auf die Schaltfläche klicken.

Ich möchte nicht gerne die Schaltfläche absenden, wenn das Formular ungültig ist.

Ich habe versucht, die Kontrolle zu markieren und berührt oder unberührt, aber es funktioniert nicht.

Kann mir ein Körper bitte helfen. Ich möchte Fehlermeldungen anzeigen, wenn auf die Schaltfläche "Senden" geklickt wird und das Formular Fehler enthält.

<form #form="ngForm" (ngSubmit)="register(form)" novalidate> 
<ion-list> 
    <ion-item> 
     <ion-label floating>First Name</ion-label> 
     <ion-input type="text" name="firstname" [(ngModel)]="model.firstname" #name="ngModel" required maxlength="100" (ionBlur)="validate(name)"></ion-input> 
    </ion-item> 
    <div class="error" *ngIf="errors.firstname"> 
     {{errors.firstname}} 
    </div> 
</ion-list> 

register(form){ 
     for (var i in form.controls) { 
     console.log(form.controls[i]); 
     form.controls[i].markAsTouched(); 
     form.controls[i].markAsPristine(); 
     form.controls[i]._touched = true; 
     } 
    } 

Answer 1

So für die Vorlage getrieben Formen ist es ein bisschen Arbeit für die Validierung erforderlich. Das erste, was ich sagen würde ist, dass Sie Etiketten oder irgendeine Art von Fehler-Bit neben Ihre Eingaben hinzufügen können, wie so ...

<div class="error" *ngIf="form.controls.firstname?.errors | json"> 
     {{form.controls.firstname?.errors | json}} 
    </div> 

Und wenn Sie eine Taste, um es wie so ...

ändern einreichen aussehen würde

<button type="submit" [disabled]="form.invalid">Submit</button> 

Answer 2

der einfachste Weg, ein boolesches Flag würde, zum Beispiel submitted, die Sie als true gesetzt, nachdem Sie den Absenden-Button geklickt haben, und dann in Vorlage hinzufügen Sie nur, dass an den *ngIf, so zum Beispiel etwas wie folgt aus:

<div *ngIf="submitted && name.errors?.required"> 
    Name is requried! 
</div>