如何在 ionic 3 中的模板驱动表单中添加验证？

Question

如何在ionic 3中验证手机号码，这里我使用了ng模型，有没有例子可以完成？

    <ion-list>
        <ion-item margin-bottom>
            <ion-input type="number" id="phone"   name="phone"  [(ngModel)]="data.phone" #username="ngModel" placeholder="Mobile"></ion-input>
         
        </ion-item>



        <ion-item margin-bottom> 
            <ion-input type="password" id="password" name="password"  [(ngModel)]="data.password" placeholder="*Password"></ion-input>
        </ion-item>

        <div style="text-align:center;">
            <button ion-button color="primary" type="submit" (click)="login()">
        <ion-icon ios="ios-log-in" md="md-log-in"></ion-icon>
      Login</button>
        </div>
    </ion-list>

Answer 1

.html 文件代码

<ion-list>
    <ion-item margin-bottom>
        <ion-input type="number" id="phone"   name="phone"  [(ngModel)]="data.phone" #username="ngModel" placeholder="Mobile" (ionChange)='validateForm()'></ion-input> 
        <br/>
        {{phoneErrorMessage}}
    </ion-item>

    <ion-item margin-bottom> 
        <ion-input type="email" id="email" name="email"  [(ngModel)]="data.email" placeholder="*Password" (ionChange)='validateForm()'></ion-input>

        <br/>
        {{emailErrorMessage}}
    </ion-item>

    <div style="text-align:center;">
        <button ion-button color="primary" type="submit" (click)="login()">
            <ion-icon ios="ios-log-in" md="md-log-in"></ion-icon>Login
        </button>
    </div>
</ion-list>

.ts 文件代码

public phoneErrorMessage = '';
  public emailErrorMessage = '';
  public data = {email:'',phone:''}
  validateForm(){
      var phoneValidationFlag = false ;
      var emailValidationFlag = false ;
  
      if (this.data.phone == "") {
          this.phoneErrorMessage = "Name must be filled out";
          phoneValidationFlag = false ; 
      }else{
          this.phoneErrorMessage = '';
          phoneValidationFlag = true;
      }
  
      var emailRegex = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/;
      if (!emailRegex.test(this.data.email)){  
          this.emailErrorMessage =  'Please enter valid email';
          emailValidationFlag = false
      }else{
          this.emailErrorMessage = '';
          emailValidationFlag = true;
      }
  
      return (emailValidationFlag && phoneValidationFlag) ? true : false ;
  }
  
  
  login(){
      if(this.validateForm()){
          //everything validated and you can excute your api call in this if section
      }
  }