时间戳

首页 > 解决方案 > Angular：- 不显示和隐藏错误消息

angular - Angular：- 不显示和隐藏错误消息

问题描述

下面是对 onclick 提交按钮工作正常的代码，如果它的错误，那么它只会在提交按钮上显示错误，一旦用户填写正确的信息，它就会不断出现并且只在点击提交按钮时继续，即如果条件适用提交按钮仅不适用于表单本身。我想我正在跳过一些东西

下面是HTML文件

<div class="col-sm-6 pb-3 zip-wrapper">
              <label for="mailingZip" class="required">Zip Code</label>
              <div class="input-wrapper">
                <input type="text" name="mailingZip" [maxLength]="20" [disabled]="setAsResidential" placeholder="Enter Zip Code" [(ngModel)]="mailingAddress.zip.value"
                  autocomplete="off" (keyup)="validateMailingZipCode()" (blur)="validateMailingZipCode()">
              </div>

              <div class="clearfix"></div>
              <p *ngIf="mailingAddress.zip.error" class="clearfix error-message">
                <i class="fa fa-exclamation-triangle" aria-hidden="true"></i> {{mailingAddress.zip.errorMessage}}</p>
            </div>

下面是ts文件

 validateMailingZipCode() {
    let hasErrors: boolean = false;
    if (parseInt(this.mailingAddress.zip.value) >= parseInt('01001') && this.mailingAddress.zip.value.length === 5) {
      return false;
    } else {
      hasErrors = true;
      this.mailingAddress.zip.error = true;
      this.mailingAddress.zip.errorMessage = 'Invalid Zip Code Provided';
    }
    return hasErrors;
  }

标签： angularangular5angular6

解决方案

只需this.mailingAddress.zip.error在您的功能中重置：

validateMailingZipCode() {
  this.mailingAddress.zip.error = false; // Reset to false on keyup
  let hasErrors: boolean = false;
  if (parseInt(this.mailingAddress.zip.value) >= parseInt('01001') && this.mailingAddress.zip.value.length === 5) {
    return false;
  } else {
    hasErrors = true;
    this.mailingAddress.zip.error = true;
    this.mailingAddress.zip.errorMessage = 'Invalid Zip Code Provided';
  }
  return hasErrors;
}

推荐阅读