ionic2ionic3angularjs-ng-form

ionic ngform submit on presenting modal


I have created a form, in the form I have a button

<form #f='ngForm' (ngSubmit)='onAddBusiness(f)' >
....
....
    <ion-item>

            <button ion-button icon-left outline block (click)='openMap()'>
              بۆ دیاریکردنی شوێن کلیک لێرە بکە
              <ion-icon name="map"></ion-icon>
            </button>
            <p *ngIf="(position==undefined); else elseblock">
              هیچ شوێنێک دیاری نەکراوە
            </p>

            <ng-template #elseblock>
              <p #elseblock>
                دەست خۆش شوێنەکە دیاری کرا
              </p>
            </ng-template>

          </ion-item>
     <ion-item>
        <button type='submit'   ion-button block [disabled]="!f.valid">ناردن</button>
      </ion-item>
    </ion-list>
  </form>

the button is present a Modal to set the location on a map. The issue is whenever I click the Button to open the modal, the form is submitted.


Solution

  • In the button to open modal, specify the type as button.

    <button type='button' ion-button icon-left outline block (click)='openMap()'>
        بۆ دیاریکردنی شوێن کلیک لێرە بکە
        <ion-icon name="map"></ion-icon>
    </button>