ngSubmit làm mới trang ở dạng Angular 2

Question

Tôi đang sử dụng mẫu Angular2 để tạo biểu mẫu.

Khi tôi nhấp vào nút, các trang sẽ làm mới.

Xác thực của tôi đang hoạt động tốt.

Làm cách nào để ngừng làm mới trang khi người dùng nhấp vào nút?

Sau đây là HTML Tôi đang sử dụng: -

<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

Sử dụng thay vì:

<button type="button" 

Các tải lại là do mặc định nộp hành vi của trình duyệt.

Answer 2

nó làm mới bởi vì có một lỗi trong onSubmit xử lý .. sử dụng event.PreventDefault(); trong onSubmit:

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


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

bạn cũng chỉ có thể kiểm tra giao diện điều khiển đầu ra để gỡ lỗi các lỗi ... chắc chắn để đánh dấu các preserve log tùy chọn

Answer 3

Hãy chắc chắn rằng bạn nhập FormsModu le từ @ angular/forms trong mô-đun có chứa thành phần của bạn vì không có biểu mẫu của bạn khi gửi sẽ tiếp tục làm mới trang và không âm thầm mà không cần ghi lại bất kỳ điều gì vào bảng điều khiển.

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