2016-04-12 15 views
8

Wenn ich ein Formular unter Verwendung button type="submit" einreiche, erscheinen die Formularüberprüfungsnachrichten und alles ist in Ordnung. Wenn ich jedoch eine Schaltfläche (oder einen Link) mit (click)="myhandler()" habe, werden die Validierungen nicht angezeigt.angular2 validate form auf Knopf klicken

Wie kann ich entweder:

  • Tag das Element als Validierer erfordert zu laufen, oder
  • programmatisch ausführen und Validierungsmeldungen zeigen.

Hinweis: Dies sind einfache Validierungen wie für Eingabefelder erforderlich.

Beispielcode:

<form (ngSubmit)="save()">      
    <input required type='text' [(ngModel)]="name"> 
    <!-- Shows validation messages but still calls save() --> 
    <button (click)="save()">Click</button> 
    <!-- Only submits if valid and shows messages -->  
    <button type="submit">Submit</button>   
</form> 
<!-- does not even show validation messages, just calls save --> 
<button (click)="save()">Click 2</button> 
+0

bitte Code geben. Ich denke, das Problem liegt in deinem Code. – micronyks

+0

sein Knopf ‚Senden‘ oder seine eine einfache Schaltfläche, wird bei der Validierung im Zusammenhang, geben Sie Ihren Code Arbeit werden wir Ihnen –

+0

am helfen ist kurz Hoffnung hilft, eine versteckte div hinzufügen, basierend auf form.validate dh ''

{{warningMessage}}

Antwort

0

Button mit Typ einreichen Trigger automatisch Formular senden, ich denke, Sie müssen manuell Formular auslösen:

<form (ngSubmit)="save()" #form="ngForm"> 

<button (click)="form.onSubmit()">Click 2</button> 

Why "ngForm"? A directive's exportAs property tells Angular how to link local variable to the directive. We set name to ngForm because the NgControlName directive's exportAs property happens to be "ngForm".

documentation

+0

Ich habe versucht, '

'und auf dem Button'
+0

nein, das gibt Fehler: 'onSubmit ist keine Funktion' – gatapia

+0

lässt sich '# form =" ngForm "' hinzufügen. – kemsky

0

Setzen Sie Ihre click2 Schaltfläche innerhalb form Tag. Es fängt an zu arbeiten!

<form (ngSubmit)="save()">      
    <input required type='text' [(ngModel)]="name"> 
    <!-- Shows validation messages but still calls save() --> 
    <button (click)="save()">Click</button> 
    <!-- Only submits if valid and shows messages -->  
    <button type="submit">Submit</button>  
    <!-- this will work now --> 
    <button (click)="save()">Click 2</button>  
</form> 
+0

Ich habe es absichtlich draußen, drehe es drinnen aber ruft immer noch speichern (wie in der ersten Taste gezeigt) – gatapia

+1

FYI ... In Ihrem Beispiel verwenden Sie nicht angular2 für die Validierung. Wie Sie es tun, verwendet es HTML5 für die Validierung. Um mit Angular2 zu validieren, müssen Sie mit 'ngFormModel, formBuilder, ngControl' Direktiven umgehen. Dies könnte Ihnen helfen - http://plnkr.co/edit/oP0A8vWFHsZ4y5A7uUQP?p=preview. – micronyks

+0

Nun, das könnte sein, wo ich falsch liege, vielleicht sind die netten Popup-Nachrichten HTML5 !! Danke, zumindest ein Weg für die Untersuchung – gatapia

1

Sie sollten die Schaltfläche deaktivieren, bis das Formular gültig ist. Also in Ihrem Fall Ihr Formularelement ändert Tag öffnet eine Variable für das Formular zu erstellen:

<form (ngSubmit)="save()" #myForm="ngForm"> 

und die Taste deaktivieren, wenn das Formular nicht gültig

<button (click)="save()" [disabled]="!myForm.form.valid">Click 2</button>

Lassen Sie mich wissen, ob das funktioniert. Da das Formular selbst in jedem Fall automatisch und konstant überprüft wird, müssen Sie nicht dafür sorgen, dass es gemacht wird.

+2

Das sieht vielversprechend aus, aber ich möchte den Button nicht deaktivieren, ich möchte, dass er die netten Popup-Nachrichten auslöst. Hat NgForm einen runValidatorsAndSubmit oder sowas? Möchte tun: '

+0

nicht wirklich, was gatapaia für ... – keuleJ

0

Programatically check and disable using validation

<form class="form-horizontal" id='myForm' role="form" [ngFormModel]="CreateGroup"> 
    <div class="col-md-7"> 
    Name: <input type="text" [(ngModel)]='demoInfo.name' class="form-control" ngControl='name'> 
    </div> 
    Form Valid : {{CreateGroup.valid}} 
</form> 
<br> 
<div class='text-center'> 
    <button type="button" [disabled]='!CreateGroup.valid' (click)="addNewGroup(demoInfo)" class="btn btn-primary">Create</button> 
</div> 

Arbeitsbeispiel http://plnkr.co/edit/aoHHw709VeMlP8Qfgnp6?p=preview

+1

das Problem mit der Deaktivierung der Schaltfläche ist, dass die netten Popup-Nachrichten nicht angezeigt werden. – gatapia

+0

Sie möchten ein Popup auf Falscher Wert anzeigen? –

+1

Ja, wenn ein Pflichtfeld leer ist und Sie das Formular abschicken, erscheint ein nettes Feld "Bitte füllen Sie dieses Feld aus". Ich mag es. – gatapia

1

Put-Bedingungen in [versteckt] Richtlinie und eingereicht Eigenschaft auf true ändern auf einreichen!

<div [hidden]="email.valid || (email.untouched && !submitted) || !submitted" class="alert callout"> 
    <span [hidden]="!email.hasError('required')">Required</span> 
</div> 

onSubmit(){ 
    this.submitted = true 
} 
+0

Bitte bearbeiten Sie mit mehr Informationen. Code-only und "try this" Antworten werden abgeraten, da sie keine durchsuchbaren Inhalte enthalten und nicht erklären, warum jemand "das versuchen sollte". Wir bemühen uns, eine Ressource für Wissen zu sein. –

+0

'onSubmit()' wird nicht aufgerufen, wenn das Formular ungültig ist. –

0

Below-Code werden Sie helfen .. Getestet mit kantiger 4 Neuester Version 4.2.4

<form method="post" #f="ngForm" name="form" novalidate="novalidate" class="form"> 
    <div class="row"> 
     <div class="form-group col-sm-12" [ngClass]="{'has-error':!listname.valid && (listname.dirty || listname.touched || f.submitted)}"> 
     <label for="listname">Name</label> 
     <input id="listname" name="listname" type="text" [(ngModel)]="listData.title" 
     required="true" placeholder="List Name" #listname="ngModel" class="form-control"/> 
     </div> 
    </div> 
    <div class="row"> 
     <div class="form-group text-right col-md-12 visible-md visible-lg"> 
     <button type="button" name="save" (click)="f._submitted = true;saveAndPublish=false;saveList(f.valid)" class="btn btn-default">Save 
     Save List 
     </button> 
     <button type="button" name="saveandpublish" (click)="f._submitted = true;saveAndPublish=true;saveList(f.valid);" class="btn btn-primary">Save 
     & Publish List 
     </button> 
     </div> 
    </div> 
</form> 

in Ihrem .ts Datei

saveList(isValid: boolean) { 
    if (isValid) { 
     console.log(this.listData) 
    } 

    } 
0

Bitte beachten Sie: Dieser Ansatz ist für reaktive Formen.

Ich verwendete markAsTouched() Eigenschaft, um Validierungen auf Knopfdruck auszuführen.

Angenommen, der folgende Knopf außerhalb des Formulars ist:

<button type="button" (click)="validateForm()">Submit</button> 

Jetzt, in der validateForm Methode, wenn das Formular ungültig ist, Sie markAsTouched() Eigenschaft für jede des Formular-Steuerelemente festlegen und Winkel werden Prüfungsmeldungen zeigen.

validateForm() { 
    if (this.myformGroup.invalid) { 
     this.myformGroup.get('firstName').markAsTouched(); 
     this.myformGroup.get('surname').markAsTouched(); 
     return; 
    } 
    // do something else 
} 

vorausgesetzt, Sie haben Setup-Validierung Nachrichten in Ihrem html wie

<mat-error *ngIf="myformGroup.get('firstName').hasError('required')"> 
    first name is required 
</mat-error> 

und Sie haben in Ihrem Formular Gruppe Builder Feldvalidierung Einrichtung erforderlich wie

firstName: ['', Validators.required]