Question

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

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

ts

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

Answer 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的答案相同（对不起，我不想“盗版”答案）

Answer 2

即使用户再次移动以纠正错误，该值仍然无效，因此也就是错误。仅当他更改值并将其设置为有效值后，验证错误消息才会消失

Answer 3

正如@dileepkumar所提到的，电子邮件值仍然无效，并且仍然希望收到该消息。如果您确实想更改行为，可以通过在按以下步骤聚焦输入时将字段标记为未触摸来实现：

// html

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

// ts

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

Answer 4

代替使用：

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

使用此：

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

，然后在此处显示错误消息。

当用户重新回到输入字段时，使验证错误消息消失

4 个答案: