当用户重新关注输入字段时，使验证错误消息消失答案

【问题标题】：Make validation error message go away when the user focuses back into the input field当用户重新关注输入字段时，使验证错误消息消失
【发布时间】：2019-02-08 16:59:13
【问题描述】：

电子邮件必须是有效的电子邮件在用户输入错误的电子邮件并移出输入字段时显示，但当他移入输入字段以更正错误时，消息不会消失。

<div *ngIf="registerForm.controls.email.touched">
    <div *ngIf="registerForm.controls.email.errors.email" data-tip="Email must 
    be a valid email address"></div>
    </div>

 email: ['', [Validators.required, Validators.email]],

【问题讨论】：

您可以添加一个标志并在用户关注输入时更改它并使用相同的标志显示消息。看here..！
@RohitSharma，第一，最好把你的代码（链接可能会在将来被破坏），第二，使用“安全操作员” registerForm.controls.email.errors?.email 以避免错误

标签： angular

【解决方案1】：

焦点控制时可以标记为未触动。见forked stackblitz of @Rohit Shama

<div class="container my-5 py-5">
    <form [formGroup]="registerForm">
        <div class="row">
            <div class="col-6">
                <input type="email" class="form-control" placeholder="Enter email"
                  formControlName="email" 
                  <!--in focus, mark as untouched-->
                  (focus)="registerForm.controls.email.markAsUntouched()"  />
        <small class="text-danger" *ngIf="registerForm.controls.email.touched">
           <!--IMPORTANT: use safe operator in errors.email-->
          <span *ngIf="registerForm.controls.email.errors?.email">
            Email must be a valid email address
          </span>
        </small>
      </div>
    </div>
</div>

::gulps:: 这与 De Wet van As 的答案相同（抱歉，我不想“盗版”答案）

【讨论】：

【解决方案2】：

即使用户再次移动以纠正错误，该值仍然无效，因此错误。只有在他更改值并使其成为有效值后，验证错误消息才会消失

【讨论】：

是的，我在问这个问题，因为我在输入字段上方显示了消息，所以它的用户 exp 不好。如果他与输入字段交互并且消息没有消失

【解决方案3】：

正如@dileepkumar 所提到的，电子邮件值仍然无效，并且消息仍然是预期的。如果你真的想改变行为，你可以通过在聚焦输入时将字段标记为未触及来做到这一点，如下所示：

// html

<input [formControl]="email" (focus)="focusEmailInput()" />

// ts

focusEmailInput()
{
    this.regsiterForm.controls.get('email').markAsUnctouched();
}

【讨论】：

【解决方案4】：

而不是使用：

<div *ngIf="registerForm.controls.email.touched">

使用这个：

<div *ngIf="registerForm.controls.email.invalid">

然后在那里显示您的错误消息。

【讨论】：