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

Question

以下是 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;
  }

Answer 1

只需在您的函数中重置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;
}