Ionic中的html5验证 [英] html5 validation in Ionic

问题描述

我当时正在学习离子.但是似乎HTML5验证在Ionic中无法正常工作.

I am learning Ionic at the time. But it seems like HTML5 validation is not working in Ionic.

所以，我有一个如下的登录表格.

So, i have a login form like below.

<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>

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

When i click on login button it didn't perform validation. As i have put required in both field but it simply submit the form.

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

Also email validation is not working.

我已检查

I have checked How can I make validation of email in Ionic using HTML5, JS or Angular work? but it is a work around. That i want to avoid.

推荐答案

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

HTML5 form validation does not work in Ionic. Instead, you can use Angular forms.

这是一个很棒的教程，作者:乔什·莫罗尼(Josh Morony)关于如何做.

This is a great tutorial by Josh Morony on how to do it.

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

In your case, you can do something like this using FormBuilder and specifying Validators for each field (for a full list of available validators, take a look at the docs).

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并在该字段无效时显示错误消息.

In your template, use FormGroup and show your error message when the field is invalid.

<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>

这篇关于Ionic中的html5验证的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！