离子：表单内的每个按钮都调用ngSubmit？答案

【问题标题】：Ionic: Every button inside form calls ngSubmit?离子：表单内的每个按钮都调用ngSubmit？
【发布时间】：2018-06-27 17:22:53
【问题描述】：

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

<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 函数也称为。有什么办法可以避免吗？

【问题讨论】：

标签： angular ionic-framework ionic3

【解决方案1】：

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

type="button"

【讨论】：

谢谢你，这个成功了，我会尽快接受这个答案。

【解决方案2】：

默认情况下，表单中的按钮类型为submit，在表单中手动将其更改为button。

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

【讨论】：