ngSubmit odświeża stronę w formularzu Angular 2

Question

Używam szablonu Angular2 do tworzenia formularza.

Po kliknięciu przycisku strony są odświeżane.

Moje zatwierdzenia działają poprawnie.

Jak zatrzymać odświeżanie strony po kliknięciu przycisku?

Poniżej HTML używam: -

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

Answer 1

użycie zamiast:

<button type="button" 

reload jest spowodowany domyślnie przedstawić zachowanie przeglądarce.

Answer 2

odświeża, ponieważ wystąpił błąd w onSubmit obsługi .. korzystanie event.PreventDefault(); w onSubmit:

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


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

też można po prostu sprawdzić wyjście konsoli do debugowania błędu ... upewnij się, aby oznaczyć opcja

Answer 3

Upewnij się importować preserve log FormsModu le od @ kątowa/formularze w module zawierającym składnik, ponieważ bez niego formularz na stronie będzie nadal odświeżał stronę i nie działa w trybie cichym bez zalogowania się do konsoli.