完成用户输入后如何在表单验证中显示错误消息 [英] How to show error message in form validation after completing the user entering

问题描述

我正在处理表单输入字段，如果用户输入错误，我可以显示错误。

我期待的是当用户完成之后是输入字段中的文本，然后我应该会收到错误消息。

但是当用户开始输入时显示错误信息

这里是我的html代码

 < form [formGroup] =myForm（ngSubmit）=submit（）> 
 
<离子排> 
< ion-col> 
< ion-item> 
< ion-label primary floating> 
名字
< / ion-label> 
< ion-input type =textid =firstnameclass =form-controlformControlName =firstname>< / ion-input> 
< / ion-item> 
 
< / ion-col> 
< ion-col> 
< ion-item> 
< ion-label primary floating> 
姓名
< / ion-label> 
< ion-input type =textid =lastnameclass =form-controlformControlName =lastname>< / ion-input> 
< / ion-item> 
< / ion-col> 
< /离子行> 
 
< ion-item> 
< ion-label primary floating> 
 USER ID（PHONE NO）
< / ion-label> 
< ion-input type =numberid =useridphoneclass =form-controlformControlName =useridphone>< / ion-input> 
< / ion-item> 
< div * ngIf =submitAttempt> 
< p * ngIf =myForm.controls.useridphone.errors&&& myForm.controls.useridphone.dirty> 
 < strong>< i> 
电话号码必须是10位数！ 
< / i>< / strong> 
< / small> 
< / p> 
< / div> 
< ion-item> 
< ion-label primary floating> 
 PASSWORD 
< / ion-label> 
< ion-input type =passwordid =passwordclass =form-controlformControlName =password>< / ion-input> 
< / ion-item> 
 
< p * ngIf =myForm.controls.password.errors&&& myForm.controls.password.dirty> 
 < strong>< i> 
密码必须包含atleast（4），1-Char 1-Number 
< / i>< / strong> 
< / small> 
< / p> 
 
< ion-item> 
< ion-label primary floating> 
确认密码
< / ion-label> 
< ion-input type =passwordid =confirmpasswordclass =form-controlformControlName =confirmpassword>< / ion-input> 
< / ion-item> 
 
< ion-item> 
< ion-label primary floating> 
 EMAIL 
< / ion-label> 
< ion-input type =emailid =emailclass =form-controlformControlName =email>< / ion-input> 
< / ion-item> 
 
< p * ngIf =myForm.controls.email.errors&&& myForm.controls.email.dirtyclass =alert alert-danger> 
 < strong> < I> 
请输入有效的电子邮件地址！ 
< / i>< / strong> 
< / small> 
< / p> 
 
< div padding> < / DIV> 
< div padding> < / DIV> 
 
< button>注册< /按钮>按钮离开按钮完整圆形类型=提交[disabled] =！myForm.validcolor =secondary> <峰; br> 
< / form> 
  

这是我的ts文件

  passwordRegex：any ='（^（？=。* [az]）（？=。* [0-9]）[a-zA-Z0-9] + $）'; 
 emailRegex：any ='^ [a-z0-9] +（\。[_ a-z0-9] +）* @ [a-z0-9  - ] +（\。[a-z0 -9  - ] +）*（\ [AZ] {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）]））
}）
  

解决方案

使用HTML元素的onblur事件。

 < input type =textname =namevalue =valueonblur =validateText（this） /> 
  

validateText将在用户离开输入字段时运行。

（用户后来表示这是Ionic特定的）。

onBlur是（就我所见）在Ionic中的一个公开问题。它不起作用。来自github主题的建议：

这是目前解决模糊问题的方法。

使用focusout或mouseleave。这些都是工作。

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

请注意，在github线程中，它表示Ionic的beta-4版本模糊正在工作。

I am working on form input field i am able to display errors if the user enters wrong.

What i am expecting is when after the user complete is text in the input field and after that i should get the error message.

but i am getting the error message shown when user started is typing

here is my html code

  <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>

here is my ts file

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) ]) )
    })

解决方案

Use "onblur" event of HTML element.

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

validateText will run when the user "leaves" the input field.

(User later indicated this was Ionic specific).

onBlur is (as far as I can see) an open issue in Ionic. It doesn't work. The recommendation from the github thread on this:

Here is a current work around for "blur".

Use "focusout" or "mouseleave". Those are both working.

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

Note that in the github thread, it says that post beta-4 of Ionic, "blur" is working.

这篇关于完成用户输入后如何在表单验证中显示错误消息的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！