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>

每当我单击调用窗体的ngSubmit函数的“ openModal（）”按钮时也称为。有什么办法可以避免这种情况？

Answer 1

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

type="button"

Answer 2

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

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

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

2 个答案: