angular2 Formular überprüfen auf die Schaltfläche klicken

Wenn ich ein Formular Absenden mit button type="submit" form Prüfmeldungen angezeigt und alles ist in Ordnung. Aber wenn ich eine Schaltfläche (oder link) mit (click)="myhandler()" dann die Validierungen nicht angezeigt.

Wie kann ich entweder:

  • - tag des Elements, in denen Prüfungen zu laufen, oder
  • programmgesteuert ausgeführt, und die Validierung von Nachrichten.

Hinweis: Dies sind einfache Validierungen wie erforderlich auf input-Felder.

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>
  • bitte geben Sie code. Ich denke, dass problem ist mit deinem code.
  • seine Typ Schaltfläche 'senden' oder eine einfache Taste, ist im Zusammenhang mit der Validierung, geben Sie Ihren code arbeiten, wir helfen Ihnen
  • ans ist kurz hoffe hilft, fügen Sie ein hidden-div basiert auf der form.überprüfen ich.e <div [hidden]="!form.validate">{{warningMessage}}</div>
InformationsquelleAutor gatapia | 2016-04-12
  1. 7

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

    Ich verwendet markAsTouched() Eigenschaft zum ausführen von überprüfungen auf eine Schaltfläche klicken.

    Angenommen, die folgende Taste ist außerhalb des Formulars:

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

    Nun, in der validateForm Methode, wenn das Formular ungültig ist, können Sie markAsTouched() - Eigenschaft für jedes Formular-Steuerelemente und-Winkel zeigen, die Validierung von Nachrichten.

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

    vorausgesetzt, Sie haben die Validierung von Nachrichten setup im html-wie 

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

    und Sie haben die Pflichtfeld-Validierung setup in der form Gruppe builder wie

    firstName: ['', Validators.required]
    InformationsquelleAutor sainture
  2. 3

    Code unten Wird Ihnen Helfen .. Getestet mit Winkel-4 Neueste 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 Ihr .ts-Datei 

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

  }
    • werden sollte ("klicken")="f.eingereicht...' anstelle von (click)="f._submitted...' Beste Antwort.Dank
    InformationsquelleAutor KIRANJOSHI
  3. 1

    Sollten Sie halten Sie die Schaltfläche solange deaktiviert, bis Sie das Formular gültig ist. Also in deinem Fall ändern Sie Ihre form-element Start-tag zu erstellen Sie eine variable für das Formular:

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

    und deaktivieren Sie die Taste Los, wenn die form ist nicht gültig

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

    Lassen Sie mich wissen, ob das funktioniert. Wie das Formular selbst, prüft automatisch und ständig in anycase, brauchen Sie nicht zu rufen, es zu tun.

    • Das sieht vielversprechend aus, aber ich möchte nicht deaktivieren, der button, ich möchte, dass es zum auslösen der schönen pop-up-Nachrichten. Tut NgForm haben eine runValidatorsAndSubmit oder so? Tun möchte: <button (click)="myForm.runValidatorsAndSubmit()" wenn seine zur Verfügung. Ich warf die ngForm auf die Konsole, fand aber nichts dergleichen.
    • nicht wirklich das, was gatapaia gefragt für...
    InformationsquelleAutor MSwehli
  4. 1

    Button mit type submit auslöst form submit automatisch, ich denke, Sie haben, um die trigger-form, manuell Einreichen:

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

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

    Warum "ngForm"? Eine Richtlinie ist exportAs Eigenschaft teilt Eckig, wie die link-local-variable der Richtlinie. Wir setzen den Namen um ngForm, weil die NgControlName Richtlinie exportAs Eigentum passiert "ngForm".

    Dokumentation

    • Ich habe versucht <form... #myform> und auf den button <button (click)="myform.submit()" und diese nicht laufen die Prüfungen.
    • NÖ, das gibt einen Fehler: ""onSubmit" ist keine Funktion"
    • fügen #form="ngForm".
    InformationsquelleAutor kemsky
  5. 1

    Bedingungen im [versteckt] - Richtlinie und der änderung eingereicht-Eigenschaft auf true Einreichen!

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

onSubmit(){
   this.submitted = true
}
    • Bitte Bearbeiten Sie mit mehr Informationen. Code-und nur "versuchen, diese" Antworten sind nicht erwünscht, denn Sie enthalten keine durchsuchbaren Inhalten, und nicht erklären, warum jemand sollte "try this". Wir bemühen uns, hier zu sein, eine Ressource für wissen.
    • onSubmit() wird nicht aufgerufen, wenn das Formular ungültig ist.
    InformationsquelleAutor Mauri Melo
  6. 0

    Setzen Sie Ihre click2 - Taste innerhalb form tag. Es wird anfangen 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>
    • Ich habe es draußen auf Zweck, indem Sie Sie von innen jedoch immer noch Anrufe speichern (wie gezeigt in die erste Schaltfläche)
    • Zur info...In Ihrem Beispiel verwenden Sie nicht angular2 für die Validierung. Die Art und Weise Sie es tun , es verwendet HTML5 für die Validierung. Zu überprüfen mit Angular2, müssen Sie sich mit ngFormModel,formBuilder,ngControl Richtlinien. dies könnte helfen, Sie - plnkr.co/Bearbeiten/oP0A8vWFHsZ4y5A7uUQP?p=Album Vorhören.
    • Nun, das könnte sein, wo ich bin, was falsch läuft, vielleicht die " nette pop-up-Nachrichten sind HTML5!! Danke, wenigstens eine Allee für investigateion
    InformationsquelleAutor micronyks
  7. 0

    Programmgesteuert überprüfen, und deaktivieren Sie mit Hilfe der Validierung

    <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>

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

    • das problem mit dem deaktivieren der Schaltfläche ist, dass sich die schöne pop-up-Meldungen nicht anzeigen.
    • Sie wollen zeigen, pop-up auf Falschen Wert ?
    • Ja, wenn ein erforderliches Feld leer und senden Sie das Formular ein nettes 'Bitte füllen Sie das Feld" pop-up erscheint. Ich mag, dass.
    InformationsquelleAutor Pardeep Jain
Schreibe einen Kommentar