버튼 클릭시 체계적으로 양식을 제출하기 위해 Angular2를 피하십시오.

그래서 이것은 불분명 한 것 같습니다. 이 양식 받기 :

<form (ngSubmit)="submit()" #crisisForm="ngForm">
   <input type="text" name="name" [(ngModel)]="crisis.name">
   <button type="submit">Submit</button>
   <button type="button" (click)="preview()">Preview</button>
   <button type="reset" (click)="reset()">Reset</button>
</form>

모든 버튼이 submit()기능을 트리거하는 이유는 무엇 입니까? 그리고 그것을 피하는 방법?

이를 해결하기위한 두 가지 옵션이 있습니다.

1) 명시 적으로 type = "button"을 지정 합니다 ( 더 바람직 하다고 생각합니다 ).

<button type="button" (click)="preview();">Preview</button>

W3 사양에 따르면 :

• http://w3c.github.io/html-reference/button.html

  A 버튼 요소 와 어떤 유형의 속성 지정은 버튼과 같은 것을 나타낸다 "제출"에 해당 유형의 속성 세트와 요소를 .

2) 용도 $event.preventDefault():

<button (click)="preview(); $event.preventDefault()">Preview</button>

또는

<button (click)="preview($event);">Preview</button>

preview(e){
  e.preventDefault();
  console.log('preview')
}

이 Plunker 는 그렇지 않으면 모든 버튼이 의도 한대로 작동하는 것처럼 보입니다.

그러나 양식의 기본 동작을 방지하려면 이렇게 할 수 있습니다.

TS :

submit(e){
 e.preventDefault();
}

주형:

<form (submit)="submit($event)" #crisisForm="ngForm">

2.0 릴리스 (ngSubmit)에서는 null이벤트 값을 메서드에 전달 하므로 대신(submit)

<form (submit)="submit($event)" #crisisForm="ngForm">

.ts 파일

submit($event){
   /* form code */
   $event.preventDefault();
}

제출을 실행하지 않을 버튼에 type = "button" 을 설정 합니다 .

나는 같은 문제가 있습니다. 내가 찾은 해결 방법은 앵커 요소에 버튼 스타일을 적용 하고 교체하는 것 button입니다 a.

<form (ngSubmit)="submit()" #crisisForm="ngForm">
   <input type="text" name="name" [(ngModel)]="crisis.name">
   <button type="submit">Submit</button>
   <a class="btn" (click)="preview()">Preview</a>
   <a class="btn" (click)="reset()">Reset</a>
</form>

app.module.ts의 '@ angular / forms'에서 FormsModule을 가져와야합니다.

import { FormsModule } from '@angular/forms';
 @NgModule({
  imports: [
    FormsModule
 ],
 })