一旦用户在字段内移动光标，如何使消息从输入框中消失答案

【问题标题】：How to make the message disappear from input box as soon as the user moves the cursor inside the field一旦用户在字段内移动光标，如何使消息从输入框中消失
【发布时间】：2019-07-01 20:30:34
【问题描述】：

当用户输入错误的确认密码并移出输入字段时显示工具提示消息，但当用户再次将焦点移到确认密码输入字段内时，工具提示消息仍保留在那里。我试图让它在用户在该框内移动焦点/光标时消失。

<div *ngIf="(registerForm.controls.c_password.touched) && (registerForm.controls.password.value !== registerForm.controls.c_password.value)">
    <div data-tip="Passwords do not match"></div>
    </div>
    <input type="text" formControlName="password" name="password" placeholder="Password *" tabindex="5"/>
    <input type="text" formControlName="c_password" name="c_password" placeholder="Confirm Password *" tabindex="6"/>

【问题讨论】：

标签： angular

【解决方案1】：

HTML 文件

要在输入字段中消失光标位置的工具提示，您需要覆盖焦点方法并清除验证器，如下所示

<input type="text" formControlName="password" name="password" 
   placeholder="Password *" tabindex="5" (focus)="clearValidator()" />

TS 文件

clearValidator() {
   registerForm.controls.c_password.clearValidators();
}

【讨论】：

【解决方案2】：

您在这种情况下显示工具提示消息 div (registerForm.controls.password.value !== registerForm.controls.c_password.value) 这就是为什么工具提示会一直保留到两个值不一样的原因。

在提交表单时，您可以检查两个字段的值并设置一个标志（布尔值）

  //form.ts
    onFormSubmit() {
    if(registerForm.controls.password.value !== registerForm.controls.c_password.value){
    this.flag = true;
    }
    }

    //form.html

    <div *ngIf="(registerForm.controls.c_password.touched) || (flag)>
        <div data-tip="Passwords do not match"></div>
        </div>
        <input type="text" formControlName="password" name="password" placeholder="Password *" tabindex="5"/>
        <input type="text" formControlName="c_password" name="c_password" placeholder="Confirm Password *" tabindex="6"/>
    <button type=submit (onclick)="onFormSubmit()"></button>

【讨论】：