How to compare two inputs in form? Angular 2 form validation

Question

I have an Angular 2 project with two input fields, greater than and less than. I want to check to ensure that the user input valid values that don't contradict each other for the filter, and I want to do that dynamically on the front end without the user having to submit the form.

To be specific, I want to ensure that the "Greater Than" input is not greater than the value inside the "Less Than" field.

How can I do so?

<form (submit)="onSubmit()" id="inputForm" class="form-group" class="row">

        <h3>Price Filters</h3>

        <span>Greater than:</span>
        <input type="number" name="greaterThanValue" [(ngModel)]="greaterThanValue" placeholder="0">

        <span>Less than:</span>
        <input type="number" name="lessThanValue" [(ngModel)]="lessThanValue">

        <input type="submit">

    </form>

cyberpirate92 · Accepted Answer · 2018-03-16 21:08:14Z

4

You can use ngModelChange to get notified of changes

HTML:

<input type="number" name="greaterThanValue" [(ngModel)]="greaterThanValue" (ngModelChange)="onChange($event)" placeholder="0">
<span>Less than:</span>
<input type="number" name="lessThanValue" [(ngModel)]="lessThanValue" (ngModelChange)="onChange($event)">

app.ts:

public onChange(event: any): void {
    if (this.greaterThanValue > this.lessThanValue) {
      console.log('Incorrect');
      this.greaterThanValue = this.lessThanValue - 1;
    }
}

UPDATE: If you just want to display a message instead of adjusting values, you can set a flag and display something based on the flag value,

<div style="color: red" *ngIf="isInvalid">Please check your ranges</div>

public onChange(event: any): void {
    this.isInvalid = this.greaterThanValue > this.lessThanValue;
}

Demo

edited Mar 16, 2018 at 21:08

answered Mar 16, 2018 at 20:43

cyberpirate92

3,1865 gold badges30 silver badges48 bronze badges

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

3 Comments

I Stand With Israel Over a year ago

Would there be a way to inform the user of their mistake instead of just adjusting the values?

cyberpirate92 Over a year ago

Updated answer and demo

I Stand With Israel Over a year ago

Cool! Thanks for the help!

Collectives™ on Stack Overflow

How to compare two inputs in form? Angular 2 form validation

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related