离子3验证不起作用“无效&&脏”

时间:2018-04-02 09:20:53

标签: ionic-framework angular2-forms

我正在尝试对Ionic中的输入进行验证。由于某种原因,验证没有启动。请参阅下面的代码:

<form #loginForm="ngForm" novalidate>
  <ion-card>

    <ion-card-content>

      <ion-item>
          <ion-label floating>Email Address</ion-label>
            <ion-input 
            [(ngModel)]="account.email" 
            type="email" 
            name="email" 
            #email="ngModel"
            required
            pattern="[A-Za-z0-9._%+-]{3,}@[a-zA-Z]{3,}([.]{1}[a-zA-Z]{2,}|[.]{1}[a-zA-Z]{2,}[.]{1}[a-zA-Z]{2,})"></ion-input>
        </ion-item>

        <div padding *ngIf="email.invalid && email.dirty">
          <span>Email address is not valid.</span>
        </div>

        <ion-item>
          <ion-label floating>Password</ion-label>
          <ion-input 
          [(ngModel)]="account.password" 
          type="password" 
          name="password" 
          #password="ngModel"
          required></ion-input>
        </ion-item>

    </ion-card-content>

    <ion-row class="login-form__buttons">
      <div>
        <button ion-button (click)="navigateToRegisterPage()" color="secondary">Register</button>
        <button ion-button (click)="login()"  color="primary">Login</button>
      </div>
    </ion-row>

  </ion-card>
</form>

Email address is not valid.未显示。我非常感谢你的帮助。

1 个答案:

答案 0 :(得分:0)

使用Ionic版本3.19.1,当您更改组件的html中的某些内容时,更改不会反映出来。您必须在.ts更改内容并保存。