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) });

  }

单击“提交”按钮可执行以下操作：

onSubmit函数的日志显示简短（console.log（＆＃39; NewEventPage＃onSubmit - newEventForm已提交＆＃39;））
似乎是一个真实的重载（从我在网络分析仪中看到的内容）将我重定向到主页并添加一个＆＃34;？＆＃34;在网址的末尾（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();

ngSubmit触发实时重载或重定向

1 个答案: