ngSubmit 会触发实时重新加载或重定向

Question

我构建了这个非常简单的形式：

<form [formGroup]="newEventForm" (ngSubmit)="onSubmit()">
<ion-item>
<ion-label color="primary">Title</ion-label>
<ion-input formControlName="title" type="text"></ion-input>
</ion-item>
<ion-item>
<ion-label color="primary">Sport</ion-label>
<ion-select formControlName="sport">
<ion-option *ngFor="let sport of sports | async" value="{{sport.id}}">{{sport.name}}</ion-option>
</ion-select>
</ion-item>
<ion-item [hidden]="!newEventForm.controls['sport'].valid">
<ion-label color="primary">Lieu</ion-label>
<ion-input disabled formControlName="location" type="text"></ion-input>
<ion-icon name="md-add-circle" item-right color="primary" (click)="presentNewLocationModal()"></ion-icon>
</ion-item>
<ion-item>
<ion-label color="primary">Date</ion-label>
<ion-datetime displayFormat="DD MMM YYYY" formControlName="date"></ion-datetime>
</ion-item>
<ion-item>
<ion-label color="primary">Heure début</ion-label>
<ion-datetime displayFormat="HH:mm" pickerFormat="HH:mm" formControlName="timeStarts"></ion-datetime>
</ion-item>
<ion-item>
<ion-label color="primary">Heure fin</ion-label>
<ion-datetime displayFormat="HH:mm" pickerFormat="HH:mm" formControlName="timeEnds"></ion-datetime>
</ion-item>
<ion-item>
<ion-label color="primary" stacked>Informations supplémentaires</ion-label>
<ion-textarea color="primary" placeholder="Où se rejoindre, niveau, intérêts, ..."></ion-textarea>
</ion-item>
<button ion-button type="submit" [disabled]="!newEventForm.valid">Submit</button>
</form>

控制器中的 onSubmit 函数如下：

onSubmit(): void {
console.log('NewEventPage#onSubmit - newEventForm has been submitted');
let value = this.newEventForm.value;
let createdOn = moment.now();
// Intermediate variables
let date = moment(value.date, 'YYYY-MM-DD');
let timeStarts = moment(value.timeStarts, 'HH:mm');
let timeEnds = moment(value.timeEnds, 'HH:mm');
// Variables to store in DB
let timestampStarts = moment(date).add({hours: timeStarts.hour(), minutes: timeStarts.minute()}).unix();
let timestampEnds = moment(date).add({hours: timeEnds.hour(), minutes: timeEnds.minute()}).unix();
let joiners = {};
joiners['aygdugyudg'] = true;
let event = {
title: value.title,
sport: value.sport,
location: value.form,
timestampStarts: timestampStarts,
timestampEnds: timestampEnds,
createdOn: createdOn,
owner: 'adazdazd',
joiners: joiners,
active: true
}
this.eventService.saveNewEvent(event)
.then(() => { console.log('NewEventPage#onSubmit - New event successfully saved') })
.catch((error) => { console.log('NewEventPage#onSubmit - Could not save new event ', error) });
}

单击"提交"按钮执行以下操作：

短暂

1. 显示 onSubmit 函数上的登录 (console.log('NewEventPage#onSubmit - newEventForm 已提交'))
2. 似乎发生了实时加载(从我在网络分析器中看到的内容)将我重定向到主页并在 url 末尾添加一个"？"(http://localhost:8100/？

我尝试注释对函数 saveNewEvent 的调用。当我这样做时，上述行为不会发生(我没有被重定向或重新加载)，所以我想它与这个函数有关：

saveNewEvent(event: any): Promise<any> {
console.log('EventService#saveNewEvent - Saving event ', event);
let shortEvent = {
title: event.title,
timestampStarts: event.timestampStarts,
}
let db = this.af.database;
let updates = {};
let eventsNode = db.list(`/${this.dbService.company}/events`);
let userEventsPath = `/${this.dbService.company}/users/${this.dbService.uid}/events`;
return eventsNode.push(event)
.then((pushKey) => {
console.log('EventService#saveNewEvent - Event has been save to events node with id ', pushKey);
updates[`/${userEventsPath}/owned/${pushKey}`] = shortEvent;
updates[`/${userEventsPath}/joined/${pushKey}`] = shortEvent;
updates[`/queue/events/tasks/${pushKey}`] = {
id: pushKey,
company: this.dbService.company,
sport: event.sport
};
db.object('/').update(updates);
console.log('EventService#saveNewEvent - Event propagated to following paths ', updates);
})
.catch(error => {
console.log('EventService#createNewEvent - Error ', error);
});
}

有什么线索吗？

Answer 1

您需要停止 html 表单的默认操作。

尝试将$event添加为onSubmit()参数，如下所示。

<form [formGroup]="newEventForm" (ngSubmit)="onSubmit($event)">

将以下更改添加到您的 JS 代码中

onSubmit(e): void { e.preventDefault();