Angular5 中未正确显示表单的验证错误

Question

每当我在城市输入框中输入内容时，它会在 HTML 上显示错误消息，但如果城市是正确的（即根据正则表达式测试没有数字、特殊字符），它会让我保存表格。问题是错误消息不断出现在 HTML 端，无论城市是否正确。就像按键一样，它会始终显示错误消息。

下面是我的ts方法

validateCity() {
    this.mailingAddress.city.error = false;
    this.mailingAddress.city.errorMessage = '';
    let hasErrors: boolean = false;
    let regEx = new RegExp(/^[a-zA-Z]+(?:[\s-][a-zA-Z]+)*$/);
    if (regEx.test(this.mailingAddress.city)) {
      return false;
    } else{
      hasErrors = true;
      this.mailingAddress.city.error = true;
      this.mailingAddress.city.errorMessage = 'Invalid City';
    }
    return hasErrors;
  }

下面是我的HTML文件

 <div class="city-info-container row">
            <div class="col-sm-6 pb-3 city-wrapper">
              <label for="mailingCity" class="required">City</label>
              <div class="input-wrapper">
                <input type="text" [maxLength]="255" name="mailingCity" placeholder="Enter City" [disabled]="setAsResidential" [(ngModel)]="mailingAddress.city.value"
                (keyup)="validateCity()" (blur)="validateCity()"
                >
              </div>
              <!-- end .input-wrapper -->
              <div class="clearfix"></div>
              <p *ngIf="mailingAddress.city.error" class="clearfix error-message">
                <i class="fa fa-exclamation-triangle" aria-hidden="true"></i> {{mailingAddress.city.errorMessage}}</p>
            </div>

Answer 1

在您的 Typescript 文件的第 6 行中，您传递的是对象而不是字符串。也许应该是：

if (regEx.test(this.mailingAddress.city.value))

Angular5 中未正确显示表单的验证错误

validation error for forms not showing up properly in Angular5

angular

typescript

angular5

angular4-forms