ユーザー入力完了後にフォーム検証でエラーメッセージを表示する方法

Question

フォーム入力フィールドで作業しています。ユーザーが間違って入力した場合、エラーを表示できます。

私は、ユーザーが完了した後に入力フィールドにテキストが表示され、その後にエラーメッセージが表示されるはずです。

が、私は、ユーザーが起動したときに表示されるエラーメッセージがここに

を入力している取得していますが、私のhtmlコードここ

<form [formGroup]="myForm" (ngSubmit)="submit()" > 

    <ion-row> 
     <ion-col> 
      <ion-item> 
      <ion-label primary floating> 
       FIRST NAME 
      </ion-label> 
      <ion-input type="text" id="firstname" class="form-control" formControlName="firstname"></ion-input> 
      </ion-item> 

     </ion-col> 
     <ion-col> 
      <ion-item> 
      <ion-label primary floating> 
       LAST NAME 
      </ion-label> 
      <ion-input type="text" id="lastname" class="form-control" formControlName="lastname"></ion-input> 
      </ion-item> 
     </ion-col> 
    </ion-row> 

    <ion-item> 
     <ion-label primary floating> 
     USER ID (PHONE NO) 
     </ion-label> 
      <ion-input type="number" id="useridphone" class="form-control" formControlName="useridphone"></ion-input> 
    </ion-item> 
    <div *ngIf="submitAttempt"> 
    <p *ngIf="myForm.controls.useridphone.errors && myForm.controls.useridphone.dirty " > 
     <small class="up" > 
     <strong><i> 
      Phone Number Must be 10 digits! 
     </i></strong> 
     </small> 
    </p> 
    </div> 
    <ion-item> 
     <ion-label primary floating> 
     PASSWORD 
     </ion-label> 
      <ion-input type="password" id="password" class="form-control" formControlName="password"></ion-input> 
    </ion-item> 

    <p *ngIf="myForm.controls.password.errors && myForm.controls.password.dirty"> 
     <small class="up"> 
     <strong><i> 
      Password must contain atleast (4),1-Char 1-Number 
     </i></strong> 
     </small> 
    </p> 

    <ion-item> 
     <ion-label primary floating> 
     CONFIRM PASSWORD 
     </ion-label> 
      <ion-input type="password" id="confirmpassword" class="form-control" formControlName="confirmpassword" ></ion-input> 
    </ion-item> 

    <ion-item> 
     <ion-label primary floating> 
     EMAIL 
     </ion-label> 
      <ion-input type="email" id="email" class="form-control" formControlName="email" ></ion-input> 
    </ion-item> 

    <p *ngIf="myForm.controls.email.errors && myForm.controls.email.dirty " class="alert alert-danger"> 
     <small class="up"> 
     <strong> <i> 
      Please Enter Valid Email Address! 
     </i></strong> 
     </small> 
    </p> 

    <div padding> </div> 
    <div padding> </div> 

    <button ion-button full round type="submit" [disabled]="!myForm.valid" color="secondary">SIGN UP</button> <br> 
    </form> 

は私のtsはイベント "とonblur"

passwordRegex: any = '(^(?=.*[a-z])(?=.*[0-9])[a-zA-Z0-9]+$)' ; 
    emailRegex: any = '^[a-z0-9]+(\.[_a-z0-9]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,15})$'; 

this.myForm = new FormGroup({ 
     'firstname'  : new FormControl('',[Validators.required,Validators.minLength(3),Validators.maxLength(10)]), 
     'lastname'  : new FormControl('', [Validators.required,Validators.minLength(1),Validators.maxLength(10)]), 
     'useridphone' : new FormControl('', [Validators.required,Validators.minLength(10),Validators.maxLength(10)]), 
     'password'  : new FormControl('',Validators.compose([Validators.required,Validators.minLength(4),Validators.maxLength(25), 
          Validators.pattern(this.passwordRegex)])), 
     'confirmpassword': new FormControl('',Validators.required), 
     'email'   : new FormControl('', Validators.compose([ Validators.required, Validators.pattern(this.emailRegex) ])) 
    }) 

Answer 1

使用ファイルですHTML要素の

<input type="text" name="name" value="value" onblur="validateText (this)"/> 

validateTextは、ユーザーが入力フィールドを「離れる」ときに実行されます。

（これは、後に、これがイオン特有であることを示した）。

onBlurは（私が見る限り）Ionicの未解決の問題です。それは動作しません。これに関するgithubスレッドからの推薦：

ここでは、「ぼかし」のための現在の回避策があります。

"focusout"または "mouseleave"を使用してください。それらはどちらも機能しています。 githubのスレッドで、それは後のベータ-4イオンの、「ぼかし」が働いているということ

https://github.com/driftyco/ionic/issues/5487

注意。