1

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>
Improve this question
1

3 Answers 3

Reset to default
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".

Improve this answer
3
  • 2
    it does not work, when I enter a year above the current one and I press save it gives me no error
    – niccoicco9
    Commented Jul 16, 2018 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
    Commented Jul 16, 2018 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
    Commented Jul 16, 2018 at 13:46
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

Improve this answer
2
  • @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
    Commented Jul 16, 2018 at 13:45
  • 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') } }
    – vishulg
    Commented Jul 16, 2018 at 13:55
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
}
Improve this answer

Not the answer you're looking for? Browse other questions tagged or ask your own question.