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? developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range seems pretty easy to set the max — epascarello
– epascarello, Commented Jul 16, 2018 at 13:18

Sourangshu Sengupta · Accepted Answer · 2018-07-16 13:21:09Z

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, 2018 at 13:21

Sourangshu Sengupta

1565 bronze badges

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

3 Comments

niccoicco9 Over a year ago

it does not work, when I enter a year above the current one and I press save it gives me no error

Katana314 Over a year ago

@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.

Sourangshu Sengupta Over a year ago

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?

vishulg · Accepted Answer · 2018-07-16 13:41:14Z

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, 2018 at 13:41

answered Jul 16, 2018 at 13:31

vishulg

1491 silver badge6 bronze badges

2 Comments

Katana314 Over a year ago

@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.

vishulg Over a year ago

Use input function then: <input type="number" (input)="yearValidation($event.target.value)"> Declare this function in ts: yearValidation(a){ if(parseInt(a)>(new Date()).getFullYear()){ alert('Year exceeds current year') } }

AlessioF · Accepted Answer · 2018-07-16 20:12:08Z

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, 2018 at 20:12

AlessioF

4532 gold badges8 silver badges22 bronze badges

Collectives™ on Stack Overflow

How can I limit the input number range with angular

3 Answers 3

3 Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related