在 Ionic 中进行 html5 验证

Question

我当时正在学习Ionic。但似乎HTML5验证在Ionic中不起作用。

所以，我有一个如下所示的登录表单。

<h3> Login </h3>
<form>
<input name="emailaddress" placeholder="Enter Email Address" class="email" [(ngModel)]="userData.l_email" type="email" required />
<input name="name" placeholder="Enter Password" class="name" type="password" [(ngModel)]="userData.l_password" required />
<button class="semi-transparent-button is-blue with-border" (click)="login()">
Login
</button>
</form>

当我单击登录按钮时，它没有执行验证。正如我在这两个字段中都要求的那样，但它只是提交表格。

电子邮件验证也不起作用。

我已经检查了如何使用HTML5，JS或Angular工作在Ionic中验证电子邮件？ 但这是一个解决方法。我想避免。

Answer 1

HTML5表单验证在Ionic中不起作用。相反，您可以使用 Angular 表单。

这是Josh Morony关于如何做到这一点的好教程。

在您的情况下，您可以使用FormBuilder并为每个字段指定Validators来执行类似操作(有关可用验证器的完整列表，请查看文档(。

import { Component } from '@angular/core';
import { Validators, FormBuilder, FormGroup } from '@angular/forms';
@Component({
selector: 'page-login',
templateUrl: 'login.html'
})
export class Login {
login: FormGroup;
submitted: boolean = false;
constructor(public formBuilder: FormBuilder) {
this.login = this.formBuilder.group({
email: ['', Validators.compose([Validators.email, Validators.required])],
password: ['', Validators.required],
});
}
onLogin() {
this.submitted = true;
if (this.login.valid) {
console.log(this.login.value);
}
}
}

在模板中，使用FormGroup并在字段无效时显示错误消息。

<form [formGroup]="login" (ngSubmit)="onLogin()">
<ion-item>
<ion-label>Email</ion-label>
<ion-input type="email" formControlName="email"></ion-input>
</ion-item>
<p ion-text [hidden]="login.controls.email.valid || submitted === false" color="danger" padding-left>
Please enter a valid email
</p>
<ion-item>
<ion-label>Password</ion-label>
<ion-input type="password" formControlName="password"></ion-input>
</ion-item>
<p ion-text [hidden]="login.controls.password.valid || submitted === false" color="danger" padding-left>
Password is required
</p>
<button ion-button type="submit">Login</button>
</form>