validation - 如何在 ionic 4 angular 8 中设置登录验证
问题描述
我想在我的登录中进行验证,例如如果我输入了错误的密码或错误的用户名,它将弹出“错误的密码或用户名”。我应该在哪里将验证部分插入代码中。
登录页面.ts
import { Component, OnInit } from '@angular/core';
import { MenuController } from '@ionic/angular';
import { ModalController, NavController } from '@ionic/angular';
import { AuthService } from '../../services/auth.service';
import { NgForm, FormGroup, FormBuilder, Validators, FormControl } from '@angular/forms';
import { Router } from '@angular/router';
import { AlertService } from 'src/app/services/alert.service';
@Component({
selector: 'app-login',
templateUrl: './login.page.html',
styleUrls: ['./login.page.scss'],
})
export class LoginPage implements OnInit {
constructor(private menuCtrl: MenuController,
private modalController: ModalController,
private auth: AuthService,
private router: Router,
private navCtrl: NavController,
private alertService: AlertService
) {
this.menuCtrl.enable(false);
}
ngOnInit() {
}
dismissLogin(){
this.modalController.dismiss();
}
submit(form: NgForm) {
this.auth.login(form.value).subscribe(
data => {
this.alertService.presentToast("Logged In");
},
error => {
console.log(error);
},
() => {
this.dismissLogin();
this.navCtrl.navigateRoot('/home');
}
);
}
}
解决方案
在角度你可以使用反应形式。为此,请记住在 App.module.ts 和 login.module.ts 中导入 ReactiveFroms Module
在 login.ts
import { Component, OnInit } from '@angular/core';
import { MenuController } from '@ionic/angular';
import { ModalController, NavController } from '@ionic/angular';
import { AuthService } from '../../services/auth.service';
import { NgForm, FormGroup, FormBuilder, Validators, FormControl } from '@angular/forms';
import { Router } from '@angular/router';
import { AlertService } from 'src/app/services/alert.service';
@Component({
selector: 'app-login',
templateUrl: './login.page.html',
styleUrls: ['./login.page.scss'],
})
export class LoginPage implements OnInit {
loginForm: FormGroup;
constructor(private menuCtrl: MenuController,
private modalController: ModalController,
private auth: AuthService,
private router: Router,
private formBuilder: FormBuilder,
private navCtrl: NavController,
private alertService: AlertService
) {
this.menuCtrl.enable(false);
this.loginForm = this.formBuilder.group({
username: ['',Validators.required],
password: ['', Validators.required],
});
}
ngOnInit() {
}
dismissLogin(){
this.modalController.dismiss();
}
submit() {
if(this.loginForm .valid)
{
this.alertService.presentToast("Logged In");
} else {
this.alertService.presentToast("Please EnterUsername and Password");
}
}
}
在 login.html 中
<form [formGroup]="loginForm">
<ion-item>
<ion-input formControlName="username" type="text" ></ion-input>
</ion-item>
<ion-item>
<ion-input formControlName="password" type="password" ></ion-input>
</ion-item>
<div>
<button ion-button class="login_btn" (click)="submit()" [disabled]="loginForm.invalid">
</button>
</div>
推荐阅读
- javascript - 下拉列表未列出从 React js 中的 https://disease.sh/ 导入的国家/地区
- python - 遍历 URL 时如何解决动态 DOM 问题?
- git - 在 Prezto ZSH 中为 git 函数自定义完成
- java - Observable 没有返回打印出来的值
- anaconda - wget 在可访问的文件上给出 403
- tomcat - 如何使 Tomcat 7 提示输入客户端证书
- javascript - SAP UI5中数据的绑定
- laravel - 如何将变量保存为集合
- python - 提高位置命名实体的空间实体准确性
- sql - 具有串联直接下属层次结构的 SQL Employee 表