javascript - 当我尝试提交登录表单时，页面正在重新加载，没有获取表单组 -Ionic 、Angular 的值

Question

当我尝试提交登录表单时，页面正在重新加载，没有获取表单组-Ionic 的值，Angular 我正在使用角度反应表单和带有离子框架的表单构建器帮助我，我不知道我在哪里弄错了## ############################################

登录组件 Html

<ion-grid>
  <br>
  <br>
  <br>
  <img src="assets/logo_dash.svg">
  <br>
  <br>
  <br>
  <br>
  <br>
  <form [formGroup]="loginForm" (ngSubmit)="login()" >
  <ion-item lines="none">
    <ion-label>UserName:</ion-label>
    <ion-input placeholder="[e-mail]" type="text"  formControlName="user"></ion-input>
  </ion-item>
  <ion-item lines="none">
    <ion-label>Password:</ion-label>
    <ion-input type="Password"placeholder="xxxxxx"  formControlName="pass"></ion-input>
  </ion-item>
  <br>
  <br>
  <ion-button type="submit" color="danger" expand="block">Login</ion-button>
</form>

</ion-grid>

登录 Ts

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormBuilder,FormControl, Validators } from "@angular/forms";
import { Router } from '@angular/router';
import {LoginService} from '../login.service';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.scss'],
})
export class LoginComponent implements OnInit {


  private loginForm: FormGroup



 

  constructor(private router: Router,private formBuilder: FormBuilder) { 
    this.loginForm = this.formBuilder.group({
      user: ['', Validators.required],
      pass: ['', Validators.required]
  });
 
  }

  login(){
    console.log(this.loginForm);
    // this.router.navigate(['/home'])
  }

  ngOnInit() {


  }

}

应用路由文件

import { NgModule } from '@angular/core';
import { PreloadAllModules, RouterModule, Routes } from '@angular/router';
import { LoginComponent } from './login/login.component';
import { HomeComponent } from './home/home.component';
import { NewcaseComponent } from './newcase/newcase.component';
import { ProjectsComponent} from './projects/projects.component';


const routes: Routes = [
  { path: '', component:LoginComponent },
  { path: 'home',component: HomeComponent },
  { path: 'new', component:NewcaseComponent },
  { path: 'projects', component:ProjectsComponent}
];
@NgModule({
  imports: [
    RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
  ],
  exports: [RouterModule]
})
export class AppRoutingModule {}

标签： javascriptangularionic-frameworkionic2ionic3

Answer 1

请检查此图像loadChildren而不是“组件”