web-dev-qa-db-fra.com

ngSubmit actualise la page sous la forme Angular 2

J'utilise un modèle Angular2 pour créer un formulaire.

Lorsque je clique sur le bouton, les pages sont actualisées.

Mes validations fonctionnent bien. 

Comment puis-je arrêter l'actualisation de la page lorsque l'utilisateur clique sur le bouton?

Voici HTML que j'utilise: -

<div class="panel panel-default">
    <div class="panel-heading">
        <h3 class="panel-title">Add Employee</h3>
        {{model | json}}
        {{EName.errors | json}}
    </div>
    <div class="panel-body">  
        <form (ngSubmit)="onSubmit(empForm)" #empForm="ngForm" autocomplete="off" novalidate>

        <div class="form-group">
            <label for="EmployeeName">Employee Name</label>
            <input type="text" class="form-control" id="EmployeeName" placeholder="Employee Name" required [(ngModel)]="model.EName" name="EName" #EName="ngModel" ngControl="Ename" #EName="EName" >
            <div *ngIf="EName.touched && EName.errors" >
                <div *ngIf="EName.errors.required"  class="alert alert-danger">
                    Employee Name is required
                </div>
            </div>
        </div>
        <div class="form-group">
            <label for="Age">Age</label>
            <input type="text" class="form-control" id="Age" name="Age" placeholder="Age" [(ngModel)]="model.Age" ngControl="Age">
        </div>
        <div class="form-group">            
            <label for="Sex">Sex</label>
            <div class="d-block">
                <label class="radio-inline">
                    <input type="radio" name="sex" id="Male" value="0" (click)="model.Sex=$event.target.value"> Male
                </label>
                <label class="radio-inline">
                    <input type="radio" name="sex" id="Female" value="1" (click)="model.Sex=$event.target.value"> Female
                </label>
            </div>
        </div>

        <div class="form-group">
            <label for="DOJ">Date of Joining</label>
            <datepicker [(ngModel)]="model.DOJ" name="DOJ"></datepicker>
        </div>

        <div class="form-group">
            <label for="Salary">Salary</label>
            <input type="text" class="form-control" id="Salary" placeholder="Salary" [(ngModel)]="model.Salary" name="Salary">
        </div>

        <div class="form-group">
            <label for="Designation">Designation</label>
            <select id="Designation" name="designation" class="form-control" required [(ngModel)]="model.Designation" name="designation" #desig="ngForm" ngControl="Designation">
                <option value="" selected>-- Select  --</option>
                <option *ngFor="let designation of designations" value="{{ designation.id }}"> 
                    {{designation.name}} 
                </option>
            </select>
            <div [hidden]="desig.valid || desig.pristine" class="alert alert-danger">
                Please select a proper designation.
            </div>
        </div>
        <button type="submit" class="btn btn-default" [disabled] ="!empForm.form.valid">Submit</button>
        </form>
    </div>
</div>
angulartypescript
48
Kunal

il est actualisé car il y a une erreur dans le gestionnaire onSubmit .. utilisez event.PreventDefault(); dans la onSubmit:

 <form (ngSubmit)="onSubmit(empForm, $event)" ... >


public onSubmit(empForm: any, event: Event) {
  event.preventDefault();
  .... rest of your code
}

vous pouvez aussi simplement vérifier la sortie de la console pour corriger l'erreur ... assurez-vous de cocher l'option preserve log

 preserve log checked in devtools

68
reda igbaria

Assurez-vous d'importer FormsModule from @ angular/forms dans le module contenant votre composant, car sans ce formulaire, votre formulaire soumettra régulièrement à actualiser la page et échouera sans rien enregistrer dans la console.

import { NgModule }           from '@angular/core';
import { CommonModule }       from '@angular/common';

/*make sure you import it here*/
import { FormsModule }        from '@angular/forms';

 @NgModule({
  /*and add it to the imports array here*/
  imports:      [ FormsModule,  CommonModule],
  declarations: [ YourFormComponent ],
  exports:      [],
  providers:    [],
})

export class FeatureModule{ }
49
Hamed Baatour

Utilisez à la place:

<button type="button"

Le rechargement est provoqué par le comportement d'envoi par défaut du navigateur.

11
Günter Zöchbauer

Actualise la page au format Angular 2:

Changer le type de bouton de "submit" à button , aucune modification ne peut être prise en compte.

Solution:

module de forme doit être importé dans votre module correspondant. Étant donné que < form > sans module de formulaire, considérons le format HTML. Ainsi, ce formulaire est actualisé.

<form (submit)="onSubmit()">
   <input type="text" name="firstName"/>
   <button type="submit">submit</button>
</form>

Bouton type avec submit ne pouvant déclencher que la forme onsubmit ()

1
vimal dhanush

Mise à jour 2019/2018 - Si cela vous arrive dans n'importe quelle version récente d'Angular (je suis actuellement sur 7), ce n'est pas dû à un <button type="submit"...>, en fait, c'est très bien, vous pouvez le garder. Vous pouvez également conserver l'événement (submit) sur votre élément <form>.
Vous avez probablement une erreur ailleurs qui fait que Angular n’agit pas comme prévu.

  • Assurez-vous d’avoir inclus la variable FormsModule ou ReactiveFormsModule si vous utilisez des formulaires réactifs.
  • Assurez-vous de ne pas avoir d'erreur dans votre console (cliquez sur f12 puis naviguez jusqu'à Console)

Angular n’actualisera pas la page si vous avez correctement instancié votre formulaire.

0
Augie Gardner