CODEWITHSUNDEEP
angularionic-frameworkionic3
GeForce RTX 4090
GeForce RTX 4090

Reputation: 3508

Ionic: Every button inside form calls ngSubmit?

I have a form where I'd like to write some info about a course and also add it's participants via a "+" button that opens up a dialog. This is my form:

<form novalidate (ngSubmit)="editMode ? saveCourse() : addCourse()" [formGroup]="userForm">
    <ion-item>
        <ion-label stacked>Name</ion-label>
        <ion-input type="text" [(ngModel)]="course.name" formControlName="name" ></ion-input>
    </ion-item>
    <ion-item>
        <ion-label stacked>Language</ion-label>
        <ion-input type="text" [(ngModel)]="course.language" formControlName="language" ></ion-input>
    </ion-item>
    <ion-item>
        <ion-label stacked>Participants</ion-label>
    </ion-item>
    <ion-item>
        <button  item-end class="back_button" (click)="openModal()">
            <ion-icon  ios="ios-add" md="md-add"></ion-icon>
        </button>
    </ion-item>
    <div padding-bottom>
        <button ion-button block outline color="primary" type="submit" >{{(editMode ? 'EDIT_COURSE':'ADD_COURSE') | translate}}</button>
    </div>
</form>

Whenever I click the button that calls "openModal()" the form's ngSubmit function is also called. Is there any way to avoid that?

Upvotes: 1

Views: 1182

Answers (2)

Pardeep Jain
Pardeep Jain

Reputation: 86790

By Default type of button in a form is submit change it to button manually within the form.

<button type='button' item-end class="back_button" (click)="openModal()">
            <ion-icon  ios="ios-add" md="md-add"></ion-icon>
        </button>

Upvotes: 3

TheUnreal
TheUnreal

Reputation: 24492

If you want to prevent submission of a form while using a button inside it, you must provide the following attribute to your button:

type="button"

Upvotes: 5

Related Questions