如何在完成用户输入后在表单验证中显示错误消息

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

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元素的"onblur"事件。

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

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

(用户后来表示这是Ionic特有的)。

onBlur(就我所见)是Ionic中一个悬而未决的问题。它不起作用。github线程对此的建议：

以下是当前"模糊"的解决方案。

使用"focusout"或"mouseleave"。这两者都在起作用。

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

请注意，在github线程中，它表示Ionic的测试版4之后，"模糊"正在发挥作用。