How to check if user input is less than max value in Angular 2

Question

I want to create a range filter in Angular. The user should not be able to enter a minimum value, which is smaller than the maximum input value.

HTML:

<input type="text" class="form-control" formControlName="from" [placeholder]="Minimum" />

<input type="text" class="form-control" formControlName="to" [placeholder]="Maximum" />

I'm not sure what to do. I guess I have to create two variables in the .ts-file (minValue and maxValue). And then check directly in the HTML with *ngIf, if the minValue is smaller than the maxValue and then send an error.

Does someone has an idea how to solve it properly? Thank you very much

Minimum value can be anything and maximum value should not be less than minimum input value right? is that what your question? — Sivakumar Tadisetti
– Sivakumar Tadisetti, Commented Jul 13, 2020 at 9:22

Adrita Sharma · Accepted Answer · 2020-07-13 08:07:24Z

2

You need to set Validator on change of "from" formControl

Try like this:

ngOnInit() {
    ...
    this.contactForm.get("from").valueChanges.subscribe(val => {
      this.contactForm.get("to").setValidators(Validators.min(val));
    });
}

Working Demo

answered Jul 13, 2020 at 8:07

Adrita Sharma

22.3k11 gold badges75 silver badges85 bronze badges

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

Comments

Sivakumar Tadisetti · Accepted Answer · 2020-07-13 08:57:40Z

You can try like below

component.html

<form [formGroup]="frmGrp">
    <input type="number" formControlName="fromValue" [min]="toCtrl.value" [value]="getMinValue()">
    <input type="number" formControlName="toValue">
</form>

Component.ts

export class AppComponent implements OnInit {
  name = 'Angular ' + VERSION.major;

  frmGrp: FormGroup;
  fromCtrl: AbstractControl;
  toCtrl: AbstractControl;

  constructor(private fb: FormBuilder) {}

  ngOnInit() {
    this.frmGrp = this.fb.group({
      fromValue: [0],
      toValue: [0]
    });

    this.fromCtrl = this.frmGrp.get('fromValue') as FormControl;
    this.toCtrl = this.frmGrp.get('toValue') as FormControl;
  }

  getMinValue() {
    if (this.toCtrl.value > this.fromCtrl.value) {
      this.fromCtrl.setValue(this.toCtrl.value);
    }
    return this.fromCtrl.value;
  }
}

Here is the working stackblitz

Collectives™ on Stack Overflow

How to check if user input is less than max value in Angular 2

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related