如何在 Angular 7 中隐藏错误消息 div onfocus 输入字段？

Question

当焦点位于输入字段时，我需要隐藏自定义验证消息 div。有人对此有解决方案吗？

<div class="form-group">
   <label class="col-sm-4 control-label">Password</label>
   <div class="col-sm-6">
     <input type="password" class="form-control" autocomplete="off" placeholder="Password" formControlName="newPassword" [ngClass]="{ 'is-invalid': submitted && f.newPassword.errors }">
   </div>
   <div *ngIf="submitted && f.newPassword.errors" class="invalid-feedback" class="font-cherry font-size-12">
     <div *ngIf="f.newPassword.errors.minlength">Password must be at least 6 characters</div>
   </div>
   <div *ngIf="passwordRequired != ''" class="font-cherry font-size-12">{{passwordRequired}}</div>
</div>

我需要在更改输入字段时隐藏 passwordRequired div。

Answer 1

您可以设置updateOn为'blur'。

<input [(ngModel)]="name" [ngModelOptions]="{updateOn: 'blur'}">

或者

new FormControl('', {updateOn: 'blur'});

https://angular.io/guide/form-validation#note-on-performance

Answer 2

您可以在输入中使用事件

HTML

<input type="password" (focus)="passwordFocus()" />
<div *ngIf="isErrorVisible> </div>

TS

passwordFocus() {
  isErrorVisible = false;
}

Answer 3

你可以检查event.target.value如果minlength不是6它会给你错误否则它不会给你错误

HTML

<input type="password" class="form-control" autocomplete="off" placeholder="Password" (input)="check($event)">
<div class="error_message" [hidden]="errormessage">Error Message</div>

TS

errormessage:boolean = true;

message:any;
check(e) {
this.message = e.target.value
  if (this.message.length <= 6){
    this.errormessage = false;
  } else {
    this.errormessage = true;
  }
}

CSS

.error_message{
  color: red;
  font-size: 12px;
}

如何在 Angular 7 中隐藏错误消息 div onfocus 输入字段？

How to hide error messge div onfocus input field in Angular 7?

angular

angular7