How do I perform field validation within the Angular typescript and not in the form?

Question

Due to specific requirements, I need to validate the presence of my delivery.address field within the typescript code, so I am calling a function, addressIsValid(), to do this as shown in the code below.

<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()" class="primary-color">
            <!-- <div *ngIf="address.invalid && (address.dirty 
                || address.touched)" class="primary-color"> -->
            Address is required
            <!-- </div> -->
        </div>
    </ng-container>
</div>

Typescript function:

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

The problem is after valid value is entered into the field, the error message: "Address is required." does not go away. How do I fix this?

Andrei Gătej · Accepted Answer · 2019-07-09 14:41:16Z

1

I think the problem is in your addressIsValid function.

Take this 2 objects for example:

const o = { name: 'john' };
const o2 = { name: undefined };

!o.name --> false;
!o2.name --> true;

Neither of the above fulfills the condition == undefined or == null.

Thus, you will always get a falsy value.

You could modify your function like this:

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

answered Jul 9, 2019 at 14:41

Andrei Gătej

12.1k1 gold badge22 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Xesenix · Accepted Answer · 2019-07-09 14:39:23Z

0

You probably wanted to check this:

public addressIsValid() {
    return !!this.delivery.address;
  }

example

If that is not the case you need to debug what this.delivery actually contains after your method call.

console.log(this.delivery)

And tell us what that contains.

answered Jul 9, 2019 at 14:39

Xesenix

2,55818 silver badges30 bronze badges

Comments

Tom Faltesek · Accepted Answer · 2019-07-09 14:46:41Z

I would suggest reading about Angular Reactive Forms. You can easily define validation rules in TypeScript and drive the display of error messages in your view.

  this.heroForm = new FormGroup({
    'name': new FormControl(this.hero.name, [
      Validators.required,
      Validators.minLength(4),
      forbiddenNameValidator(/bob/i) // <-- Here's how you pass in the custom validator.
    ]),
    'alterEgo': new FormControl(this.hero.alterEgo),
    'power': new FormControl(this.hero.power, Validators.required)
  });

  <div *ngIf="name.errors.required">
    Name is required.
  </div>
  <div *ngIf="name.errors.minlength">
    Name must be at least 4 characters long.
  </div>
  <div *ngIf="name.errors.forbiddenName">
    Name cannot be Bob.
  </div>

Also take a look at the FormBuilder service, which will help condense the form creating syntax.

Collectives™ on Stack Overflow

How do I perform field validation within the Angular typescript and not in the form?

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related