如何在用户将光标移动到字段内时使消息从输入框中消失

Question

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

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

Answer 1

HTML文件

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

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

TS文件

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

Answer 2

在此条件下显示工具提示消息div(registerForm.controls.password.value！==registerForm.coontrols.c_password.vvalue)这就是为什么工具提示会一直保留到两个值不相同为止。

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

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