Translate

2017년 10월 12일 목요일

[Angular 2+] Button 태그 없이 Submit 수행하기




Angular 4 에서 <a> (Anchor Tag) 로 Submit 을 해야 하는 상황이 생겼다.
(퍼블리싱된 페이지를 보니 <button> 이 아니라 <a> 로 되어있었다.)



아래와 같이 작업을 했다. (O)
1004lucifer
<form [formGroup]="myForm" (ngSubmit)="onSubmit()">
 <p class="aln_c mrg_T20">
  <button type="submit" #submitBtn style="display:none;"></button>
  <a (click)="submitBtn.click()"><span class="btn_blue btn_popcon">확 인</span></a>
  <a (click)="activeModal.close()"><span class="btn_gray btn_popcon">취 소</span></a>
 </p>
</form>





이것저것 해보며 아래와 같은 방법도 시도를 했는데,
아래와 같이 하게되면 페이지가 새로고침 되어버리므로 사용할 수가 없다. (X)

<form [formGroup]="myForm" (ngSubmit)="onSubmit()" #formElem>
 <p class="aln_c mrg_T20">
  <a (click)="formElem.click()"><span class="btn_blue btn_popcon">확 인</span></a>
  <a (click)="activeModal.close()"><span class="btn_gray btn_popcon">취 소</span></a>
 </p>
</form>


1004lucifer

PS.
(click) 속성으로 이렇게 저렇게 해보면서 한참을 시도 해봤는데 결국 button 태그가 꼭 있어야 ajax로 submit 이 가능했었다.ㅠ
다음엔 퍼블리싱 할 때 꼭 버튼은 button 태그를 이용해 달라고 이야기 해야 할듯..
 submit without but

댓글 없음 :

댓글 쓰기