How can I limit the input number range with angular

Question

I would like to limit the input number that can go up to the current year, the user cannot enter a year higher than the current one. How can I do it?

My code:

<ion-content >
 <form>
  <ion-list>
    <ion-item>
      <ion-label>Stagione</ion-label>
      <ion-input [(ngModel)]="season.Description"></ion-input>
    </ion-item>
    <ion-item>
      <ion-label>Year</ion-label>
      <ion-input [(ngModel)]="season.Year" type="number"></ion-input>
    </ion-item>
    <ion-item>
      <ion-label>Primavera/Estate</ion-label>
      <ion-checkbox [(ngModel)]="season.IsSpringSummer"></ion-checkbox>
    </ion-item>
    <ion-item>
      <ion-label>Default</ion-label>
      <ion-checkbox [(ngModel)]="season.IsDefault"></ion-checkbox>
    </ion-item>
    <ion-item>
      <ion-label>Nascosto</ion-label>
      <ion-checkbox [(ngModel)]="season.IsHidden"></ion-checkbox>
    </ion-item>

  </ion-list> 

</ion-content>
<ion-footer>
  <ion-toolbar color="footer">
    <ion-buttons right>
  <button ion-button clear color="dark" (click)="save()">Save&nbsp;

      </button>

    </ion-buttons>
  </ion-toolbar>

</ion-footer>

Did you read the docs for range? https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range seems pretty easy to set the max — epascarello, Jul 16 '18 at 13:18

score 3 · Answer 1 · answered Jul 16 '18 at 13:21

3

You can make use of the min and max properties.

Bind the max property to the current year like so: <ion-input [(ngModel)]="season.Year" type="number" [max]="{{(new Date()).getFullYear()}}"></ion-input>.

The logic for getting the full year could be moved to the typescript file and could be stored in a variable like currentYear. In the template we can then bind to max like so: [max]="currentYear".

answered Jul 16 '18 at 13:21

Sourangshu Sengupta

156
5

2

it does not work, when I enter a year above the current one and I press save it gives me no error – niccoicco9 Jul 16 '18 at 13:32
1

@Sourangshu part of the issue may be that that validation occurs on a browser level, and they may prevent form submission in different ways than angular would react to. – Katana314 Jul 16 '18 at 13:42
Does it still accept the higher value? My answer only dealt with the "restricting" part. It doesn't deal with how to handle the exceptional scenario as that wasn't mentioned in the question. Can you try moving the logic for getting the date to the typescript file and set a variable `onInit`, and bind `max` to that variable and check? – Sourangshu Sengupta Jul 16 '18 at 13:46

vishulg · Accepted Answer · 2018-07-16T13:41:14.557

2

You can do it simply by HTML only:

<input type="number" oninput="if(value > (new Date()).getFullYear()) alert('Year exceeds current year')">

If you really want to do it by Angular only you have to create custom Validator which you can find in the link given below:

Min / Max Validator in Angular 2 Final

If you are using Angular 6 then you can use min and max validators which you can find in the link given below:

https://angular.io/api/forms/Validators#min

edited Jul 16 '18 at 13:41

answered Jul 16 '18 at 13:31

vishulg

149
1
6

@niccoicco9 Look past the "copy/paste" recommendation. `value` would be the variable in your model you want to check, and would be different on each element. – Katana314 Jul 16 '18 at 13:45
Use input function then: Declare this function in ts: yearValidation(a){ if(parseInt(a)>(new Date()).getFullYear()){ alert('Year exceeds current year') } } – vishulg Jul 16 '18 at 13:55

score 2 · Answer 3 · answered Jul 16 '18 at 20:12

2

I suggest you simply to do a check in function save(). It can be like this:

if((new Date()).getFullYear() < this.season.Year) {
   //display an error message, maybe using alert or toast
}

answered Jul 16 '18 at 20:12

AlessioF

453
2
8
19

How can I limit the input number range with angular

3 Answers3