ngSubmitは、角2の形式でページを更新します。

Question

私は、フォームを作成するためにAngular2テンプレートを使用しています。

ボタンをクリックすると、ページが更新されます。

私の検証はうまくいきます。

ユーザーがボタンをクリックしたときにページを更新する方法を教えてください。代わりに

<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

用途：

<button type="button" 

リロードが既定のブラウザの動作を提出によって引き起こされる - ：以下の

は、私が使用していますHTMLです。

Answer 2

onSubmitハンドラにエラーがあるので、それは... onSubmitで 使用event.PreventDefault();リフレッシュします：また、あなただけマークしていることを確認してください...エラー をデバッグするコンソール出力を確認することができます

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


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

をpreserve logオプション

Answer 3

あなたがをインポートしていることを確認してくださいFormsModuあなたのフォームがなければ、ページをリフレッシュし続け、コンソールに何もロギングしないで静かに失敗するので、コンポーネントを含むモジュールにから@ angular/formsが含まれています。

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