イオン2または角度2 htmlページレベルのメールとパスワードの検証

Question

メール/電話番号とパスワードのパターンを追加しようとしています。どのようにパターンが期待どおりに機能しないか。

<form (ngSubmit)="onSubmit()" #signInForm="ngForm"> 
      <ion-list padding-bottom> 
      <ion-item> 
       <ion-input type="text" placeholder="Email/Phone number" required #name="ngModel" 
         [(ngModel)]="email" pattern="^(?!^[.])([-'a-zA-Z0-9_]+\\.)*[-'a-zA-Z0-9_]+@(?!\\.+)([-a-zA-Z0-9]+\\.)+[a-zA-Z]{2,}$""></ion-input> 
       <div [hidden]="email.valid" 
        class="alert alert-danger"> 
       Email is required and Email or Phone number pattern is wrong. 
       </div> 
      </ion-item> 
      <ion-item> 
       <ion-input type="password" id="password" 
         required 
         [(ngModel)]="password" name="password" 
         #name="ngModel" placeholder="Password" pattern="(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#\$%\^&])(?=.{8,})"> 
       <div [hidden]="password.valid" 
        class="alert alert-danger"> 
        Password is required and must contain at least one number and one uppercase and lowercase letter, and at least 8 or more characters. 
       </div> 
       </ion-input> 
      </ion-item> 
      <p float-right (click)="forget()">Forget Password?</p> 
      <button ion-button color="secondary" [disabled]="!signInForm.form.valid" round (click)="login()" float-left>Proceed</button> 
      </ion-list> 
     </form> 

Answer 1

ion-inputはpattern性質を持っていないので、私はそれを動作shoudlかどうかわからないです。

私はあなたに反応的なフォームの方法で行くことをお勧めします。コンポーネントで

は、フォーム

public loginForm = new FormGroup({ 
    username: new FormControl('', [Validators.required, Validators.pattern(/^(?!^[.])([-'a-zA-Z0-9_]+\\.)*[-'a-zA-Z0-9_]+@(?!\\.+)([-a-zA-Z0-9]+\\.)+[a-zA-Z]{2,}$/)]), 
    password: new FormControl('', [Validators.required]) 
    }); 

変更テンプレートを定義（formGroupとformControlNameを追加）

<ion-list [formGroup]="loginForm"> 
     <ion-item> 
      <ion-label floating>{{ 'login.email' | translate }}</ion-label> 
      <ion-input type="text" formControlName="username"></ion-input> 
     </ion-item> 

     <ion-item> 
      <ion-label floating>{{ 'login.password' | translate }}</ion-label> 
      <ion-input type="password" formControlName="password"></ion-input> 
     </ion-item> 
    </ion-list> 

今、あなたは

this.loginForm.value 

またはあなたのようなコンポーネントでフォームの値にアクセスすることができますフォームが有効かどうかを確認することができます

this.loginForm.valid