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

使用＆＃34; onblur＆＃34; HTML元素的事件。

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

validateText将在用户＆＃34;离开＆＃34;输入字段。

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

onBlur（据我所知）是Ionic中的一个未解决的问题。它不起作用。来自github线程的建议：

以下是＆＃34;模糊＆＃34;。

的当前解决方法

使用＆＃34;聚焦＆＃34;或＆＃34; mouseleave＆＃34;。这些都在发挥作用。

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

请注意，在github线程中，它表示发布了Ionic的beta-4，＆＃34;模糊＆＃34;工作中。

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

1 个答案: