离子加速器中的html5验证_Html_Ionic Framework_Ionic2

离子加速器中的html5验证

html ionic-framework ionic2

离子加速器中的html5验证,html,ionic-framework,ionic2,Html,Ionic Framework,Ionic2,我当时正在学习离子。但HTML5验证在爱奥尼亚似乎不起作用所以，我有一个如下的登录表单 <h3> Login </h3> <form> <input name="emailaddress" placeholder="Enter Email Address" class="email" [(ngModel)]="userData.l_email" type="email" required /> <in

我当时正在学习离子。但HTML5验证在爱奥尼亚似乎不起作用

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

<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表单验证在Ionic中不起作用。相反，可以使用角度形式

乔希·莫罗尼关于如何做到这一点

在您的例子中，您可以使用

FormBuilder

并为每个字段指定

Validators

（有关可用的验证器的完整列表，请参阅）

在模板中，使用

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>


电子邮件

请输入有效的电子邮件

密码

密码是必需的

登录