Ionic4 ngSubmit 未在提交时触发

Question

第一次使用 Ionic4 并努力解决 ngSubmit 未触发登录页面中相应方法的问题。尽管它总是成功命中 LoginPage 构造函数和 AuthService 构造函数。所有相应的模块都已导入，也没有控制台错误。我做错了什么？

login.page.html:

<ion-header>
  <ion-toolbar>
    <ion-title>
      Login
    </ion-title>
  </ion-toolbar>
</ion-header>
<ion-content>   
    <form (ngSubmit)="login()" [formGroup]="loginForm">
        <ion-grid>          
            <ion-row>
                    <ion-col>
                        <ion-item>
                        <ion-input type="text" placeholder="Email" formControlName="email" style="width:50%;"></ion-input>
                    </ion-item>
                    </ion-col>
                </ion-row>
                <ion-row>
                    <ion-col col-3>
                        <ion-item>
                        <ion-input type="password" placeholder="Password" formControlName="password" style="width:50%;"></ion-input>
                    </ion-item>
                    </ion-col>
                </ion-row>
        </ion-grid>
        <div padding-horizontal>
            <div class="form-error">{{loginError}}</div>
        </div>                  
            <ion-grid>
                <ion-row>
                    <ion-col>                       
                            <ion-button type="submit" [disabled]="!loginForm.valid" color="primary">Log in</ion-button>                     
                            &nbsp;&nbsp;                        
                            <a href="#">Forgot password?</a>
                    </ion-col>                  
                </ion-row>
                <ion-row>
                    <ion-col>
                <ion-button icon-left block clear (click)="loginWithGoogle()" color="secondary">
                    <ion-icon name="logo-google"></ion-icon>
                    Log in with Google
                </ion-button>
                <ion-button icon-left block clear (click)="signup()" color="primary">
                        <ion-icon name="person-add"></ion-icon>
                        Sign up
                    </ion-button>
            </ion-col>          
            </ion-row>
            </ion-grid>     
    </form> 
</ion-content>

login.page.ts:

import { Component, OnInit } from '@angular/core';
import { AuthService } from '../common/services/auth.service';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
import { Router } from '@angular/router';

@Component({
  selector: 'app-login',
  templateUrl: './login.page.html',
  styleUrls: ['./login.page.scss'],
})

export class LoginPage implements OnInit {
  loginForm: FormGroup;
  loginError: string;

  constructor(private auth:AuthService,
              private router:Router,
              private fb: FormBuilder) 
  {
    this.loginForm = this.fb.group({
            email: ['', Validators.compose([Validators.required, Validators.email])],
            password: ['', Validators.compose([Validators.required, Validators.minLength(6)])]
        });
  }

  ngOnInit() {}  

  login() {  
    alert('login');
        let data = this.loginForm.value;

        if (!data.email) {
            return;
        }

        let credentials = {
            email: data.email,
            password: data.password
    };

        this.auth.signInWithEmail(credentials)
            .then(
                () => this.router.navigate(['/home']),
                error => this.loginError = error.message
            );
    }  
}

login.module.ts:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule,ReactiveFormsModule } from '@angular/forms';
import { Routes, RouterModule } from '@angular/router';
import { IonicModule } from '@ionic/angular';

import { LoginPage } from './login.page';

const routes: Routes = [
  {
    path: '',
    component: LoginPage
  }
];

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    ReactiveFormsModule,
    IonicModule,
    RouterModule.forChild(routes),
  ],
  entryComponents: [LoginPage],
  declarations: [LoginPage]
})
export class LoginPageModule {}

auth.service.ts:

import { Injectable } from '@angular/core';
import { AngularFireAuth } from 'angularfire2/auth';
import * as firebase from 'firebase/app';
import AuthProvider = firebase.auth.AuthProvider;

@Injectable({
  providedIn: 'root'
})
export class AuthService {
  private user: firebase.User;

    constructor(public afAuth: AngularFireAuth) {
        afAuth.authState.subscribe(user => {            
            this.user = user;
        });
    }

    signInWithEmail(credentials) {
        console.log('Sign in with email');
        return this.afAuth.auth.signInWithEmailAndPassword(credentials.email,
             credentials.password);
    }
}

Answer 1

ngSubmit 正在重新加载整个页面，因此它只命中登录构造函数而不是相应的方法。在 <form> 上删除了 (ngSubmit)，在 <ion-button> 上删除了 type="submit"，在 <ion-button> 中添加了 (click)="login()" 事件。它开始工作了。

Ionic4 ngSubmit 未在提交时触发

Ionic4 ngSubmit is not firing on submit

ng-submit

angular4-forms

ionic4

capacitor