Angular TypeScript字段验证问题：输入有效值后错误提示未消失

Hey there, let's figure out why that error message won't disappear even after you enter a valid address. The root issue is in your addressIsValid() function's logic—operator precedence is messing up the validity checks!

What's Wrong with the Original Function? #

Your current TypeScript code looks like this:

public addressIsValid() { return !this.delivery.address == undefined && !this.delivery.address == null; }

The ! operator has higher priority than ==, so the code is actually evaluating (!this.delivery.address) == undefined and (!this.delivery.address) == null. When you enter a valid address (a non-empty string), !this.delivery.address becomes false—and false == undefined/false == null both evaluate to false. That means the whole function returns false, so !addressIsValid() stays true, keeping the error message visible.

How to Fix It #

Let's rewrite the function to properly check if the address exists (and optionally, isn't just empty whitespace):

Option 1: Basic Existence Check (Allow Empty Strings)

If you only need to ensure the address isn't undefined or null:

public addressIsValid() {
  return this.delivery.address !== undefined && this.delivery.address !== null;
}

Option 2: Strict Check (Disallow Empty/Whitespace-Only Strings)

For a more robust check that filters out blank or space-only entries (which are probably invalid for an address):

public addressIsValid() {
  return this.delivery.address !== undefined && 
         this.delivery.address !== null && 
         this.delivery.address.trim() !== '';
}

Bonus: Improve User Experience with Angular Form States #

Your commented-out code uses Angular's form state properties (dirty, touched)—this is a great practice to avoid showing errors before the user interacts with the input. Update your template to combine this with your valid function:

<div class="col col-md-6 col-lg-12">
  <input class="form-control" type="text" name="address" id="address" [(ngModel)]="delivery.address" #address="ngModel">
  <ng-container *ngIf="delivery.method=='Delivery'">
    <div *ngIf="!addressIsValid() && (address.dirty || address.touched)" class="primary-color">
      Address is required
    </div>
  </ng-container>
</div>

This way, the error only shows up after the user has typed something (and then erased it) or clicked into/out of the input, making the form feel more user-friendly.

内容的提问来源于stack exchange，提问作者koque