如何解决当我尝试提交登录表单时,页面正在重新加载,没有获取表单组的值 -Ionic ,Angular
当我尝试提交登录表单时,页面正在重新加载,没有获取表单组 -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="user@email.com" 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 {}
解决方法
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。