Ionic：表单中的每个按钮都调用 ngSubmit？

Question

我有一个表格，我想在其中写下有关课程的一些信息，并通过打开对话框的“+”按钮添加参与者。这是我的表格：

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

每当我单击调用“openModal()”的按钮时，也会调用表单的 ngSubmit 函数。有什么办法可以避免吗？

Answer 1

如果要防止在使用表单中的按钮时提交表单，则必须为按钮提供以下属性：

type="button"