Angular 離子反應形式不會調用 ngSubmit function，而是刷新頁面

Question

我正在嘗試在 Angular (v12) 和 Ionic (v6) 項目中創建一個 Reactive 表單。 當我提交表單時，而不是調用在表單標簽 ngSubmit 屬性中指定的提交 function，頁面只是出現刷新。 該應用程序基於離子標簽，以防出現問題？ 我已將 ReactiveFormsModule 導入頁面模塊而不是應用程序模塊，因為我閱讀的各種教程建議您在使用 Ionic 時需要這樣做。

配置文件.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { IonicModule } from '@ionic/angular';
import { ProfilePage } from './profile.page';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
    
@NgModule({
   imports: [
     CommonModule,    
     IonicModule,
     FormsModule,
     ReactiveFormsModule,
   ],
   declarations: [ProfilePage]
})    

export class ProfilePageModule {}

配置文件.page.ts

import { Component, OnInit } from '@angular/core';
import {FormControl, FormGroup, Validators} from '@angular/forms';
import { Profile } from '../shared/models/profile';
import { ProfileService } from './profile.service';
    
@Component({
   selector: 'app-profile',
   templateUrl: './profile.page.html',
   styleUrls: ['./profile.page.scss'],
})

export class ProfilePage implements OnInit {    
  profileForm : FormGroup   
  constructor(private _profileService: ProfileService) {}
    
    ngOnInit(): void {
      this.profileForm = new FormGroup({
        firstName: new FormControl(),
        middleName: new FormControl(),
        lastName: new FormControl(),
        dob: new FormControl(),
        companyId: new FormControl()
      });
    }
 
    save() {
      console.log('test');
    }
}

配置文件.page.html

<ion-content>
   <form [formGroup]="profileForm" (ngSubmit)="save()" novalidate>
   <ion-list>
      <ion-item>
         <ion-label>First Name</ion-label>
         <ion-input 
            id="firstName"
            type="text"
            required
            formControlName="firstName">
         </ion-input>
      </ion-item>
      <ion-item>
         <ion-label>Middle Name</ion-label>
         <ion-input
            id="middleName"
            type="text"
            formControlName="middleName">
         </ion-input>
         >
      </ion-item>
      <ion-item>
         <ion-label>Last Name</ion-label>
         <ion-input
            id="lastName"
            type="text"
            formControlName="lastName">
         </ion-input>
         >
      </ion-item>
      <ion-item>
         <ion-label>DOB</ion-label>
         <ion-input 
            id="dob"
            type="date"
            formControlName="dob">
         </ion-input>
         >
      </ion-item>
      <ion-button form="profileForm"
         expand="block"
         type="submit"
         [disabled]="!profileForm.valid">
         Save
      </ion-button>
   </ion-list>
   </form>
</ion-content>

Answer 1

使用按鈕屬性介紹它：這有效並阻止了整個頁面的重新加載：如<button type="button"或

1. 我將按鈕類型從“提交”更改為“按鈕”
2. 我在按鈕道具中引入了一個(click)= submitValues() ，如下所示：提交

即<button type="submit" (click)= submitValues()>Submit Form</button>

這阻止了頁面重新加載，希望對您有所幫助。

Answer 2

我設法通過將profile.module.ts導入AppModule來解決這個問題。