webentwicklung-frage-antwort-db.com.de

Angular 2 Trigger Form Validation beim Senden

Ich habe ein Formular mit Winkel 2 erstellt und einige benutzerdefinierte Validatoren hinzugefügt. Jetzt möchte ich die Formularüberprüfung auslösen, wenn der Benutzer auf die Schaltfläche "Senden" klickt. In den Beispielen, die ich bisher gefunden habe, ist der Submit-Button deaktiviert, solange das Formular ungültig ist. Ich möchte jedoch, dass der Submit-Button immer aktiviert ist und wenn der Benutzer auf Submit klickt, sollte das Formular bestätigt werden. Weiß jemand, wie ich das schaffen kann und welche TypeScript-Methode ich verwenden sollte? Ich habe die updateValueAndValidity-Methode gefunden, scheint aber mit dieser Methode nicht zu funktionieren.

14
Snake

Wenn Sie ein Template Driven Form verwenden, können Sie folgende Syntax verwenden:

<form #f="ngForm" (submit)="add(f.valid)" novalidate>
    <button type="submit">Save</button>
</form>

.ts

add(isValid: boolean){
   if(isValid){
       //do something
   }
}

sie können auch einige Fehler beim Senden hinzufügen:

<form #f="ngForm" (submit)="add(f.valid)" novalidate>
    <label>Name</label>
    <div>
        <input [(ngModel)]="name" name="name" #name="ngModel" required>
    </div>
    <div[hidden]="name.valid || (name.pristine && !f.submitted)">
        <small class="text-danger">Please input name</small>
    </div>
    <button type="submit">Save</button>
</form>
12
dev_in_progress

Die Validierung sollte bei jedem Modellwechsel durchgeführt werden. Aber möglicherweise wird die Fehlermeldung nicht angezeigt, weil das FormControl nicht berührt wird. Hier ist meine Lösung, die gut funktioniert. 

Ich habe es mit den folgenden einfachen Schritten gemacht: 

  1. Implementieren Sie eine FormComponent (Selector "form"), die die formGroupDirective einfügt (abonnieren Sie das submit-Ereignis und setzen Sie es als true.)
 @Component ({
 Selector: 'form', 
 TemplateUrl: 'form.component.html', 
 StyleUrls: ['form.component.scss'] 
}.}). Die Exportklasse FormComponent implementiert OnInit {
 @Output () submit = new EventEmitter (); 

 Konstruktor (@Optional () private formGroupDirective: FormGroupDirective) {
 } 

 ngOnInit () {
 if (this.formGroupDirective) {
 this.formGroupDirective.ngSubmit.subscribe (() => {
 this.formGroupDirective.form ['submit'] = true; 
}); 
 } 
 } 

 } 

Die wichtigen Zeilen sind in ngOnInit

  1. Prüfen Sie, ob das Formular gesendet wurde, um den Fehler anzuzeigen

    * ngIf = "control? .hasError ('required') && (control? .touched || form? .submitted)"

Hoffentlich hilft das

1
DaniS

(Reaktive Form)

Hätte Problem damit meine Lösung ist: 

-- Vorlage

<button type="button" (click)="f.ngSubmit.emit(f)">Submit From Outside 
form</button>

<form novalidate #f="ngForm" (ngSubmit)="save($event)" 
[formGroup]="MyformGroup">
...
</form>

- Klasse

@ViewChild('f') f: FormGroupDirective;

submit(formDirective: FormGroupDirective) {
  console.log('valid', formDirective.valid);
  console.log('value', formDirective.value);
}

Dies ist eine Lösung, die ich verwende, um ein Formular mit einer Schaltfläche zu übermitteln, die nicht in Form ist.

Vielen Dank

0
Yuriy Yakovenko

Komponenten-HTML-Datei: Sie müssen das Formulargruppenmodell zum Formular-Tag und zur ngsubmit-Methode hinzufügen, um die Übermittlungsfunktion beim Übermitteln des Formulars aufzurufen. Bitte fügen Sie den formControlName in jedes Eingabefeld ein und der Name sollte derselbe sein, den Sie in der Datei der Komponente ts deklariert haben. mat-error soll den Validierungsfehler anzeigen. Wir übergeben eine Rückgabetyp-Funktion in * ngIf, die den Steuerfehler validiert und true oder false zurückgibt. Wenn es true zurückgibt, wird mat-error angezeigt.

<form [formGroup]="Addform" (ngSubmit)="submit(Addform)">
   <h1 mat-dialog-title>Add Field</h1>
   <mat-dialog-content>
      <mat-form-field>
         <input matInput formControlName="make" placeholder="Make...">
         <mat-error *ngIf="hasError('make', 'required')">Make is required</mat-error>
      </mat-form-field>
   </mat-dialog-content>
</form>

komponente ts datei zuerst müssen wir die Gruppe AddForm mit dem Typ FormGroup deklarieren. und mit dem FormBuilder müssen wir die Regeln auf diese bestimmte Formulargruppe einstellen.

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';

@Component({
  selector: 'app-comp',
  templateUrl: './app-comp.html'
})

export class CustomAddForm implements OnInit {
   Addform: FormGroup;
   submitted = false; // by default set submitted to false
   constructor(
     private formBuilder: FormBuilder
   ) {}

   ngOnInit() {
     // initialization time assign the form control rules to form builder.
     this.Addform = this.formBuilder.group({
      make: ['', Validators.required]
     })
   }

   // getter function to provide the control validation info to html 
   public hasError = (controlName: string, errorName: string) =>{
      return this.Addform.controls[controlName].hasError(errorName);
    }

   // submit function
   submit(Addform) {
      if (this.Addform.invalid) { 
      // if condition to check the form group validation.
      // show validation alert here.
         return;
     }

      this.submitted = true;
      // add you success code here.

   }

}
0
Dheeraj Kumar

Sie können beide Überprüfungen (über die Schaltfläche "Senden" werden alle Fehler mit der Fehlermeldung und der einzelnen Fehlermeldung angezeigt) mithilfe von Angular Material (MatFormFieldModule) durchführen. Nach einer langen Forschungs- und Entwicklungsarbeit hat sich mein Problem gelöst, aber zuerst werden Sie fundierte Kenntnisse über angular Material haben.

Beispielcode: -

<form [formGroup]="loginForm" (ngSubmit)="login(loginForm.value,loginForm)"> 
 <mat-form-field>
    <input matInput placeholder="Enter your email" formControlName="email">
      <mat-error *ngIf="loginForm.controls['email'].hasError('required')">Required</mat-error>
      <mat-error *ngIf="loginForm.controls['email'].hasError('email')">Invalid Mail</mat-error>
 </mat-form-field>
</form>

login.ts Datei Code:

private createLoginForm() {
  this.loginForm = this.fb.group({
    email: new FormControl('', [Validators.required, Validators.email]),
  })
}  

Sie können mehr Prüfer entsprechend Ihrer Anforderung anbringen.