Как я могу ограничить диапазон входных чисел с помощью angular
Я хотел бы ограничить количество вводимых значений до текущего года, пользователь не может вводить год выше текущего. Как мне это сделать?
Мой код:
<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
</button>
</ion-buttons>
</ion-toolbar>
</ion-footer>
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 3
Вы можете использовать свойства min и max.
Свяжите свойство max с текущим годом следующим образом: <ion-input [(ngModel)] = "season.Year" type = "number" [max] = "{{(new Date()).getFullYear()}}"></ion-input>.
Логику получения полного года можно переместить в файл typescript и сохранить в переменной типа currentYear. Затем в шаблоне мы можем привязать к max так: [max] = "currentYear".
это не работает, когда я ввожу год выше текущего и нажимаю сохранить, это не дает мне никаких ошибок
@Sourangshu - часть проблемы может заключаться в том, что эта проверка происходит на уровне браузера, и они могут препятствовать отправке формы по-другому, чем angular отреагирует.
Он по-прежнему принимает более высокое значение? Мой ответ касался только «ограничивающей» части. Это не касается того, как справиться с исключительным сценарием, поскольку это не упоминалось в вопросе. Можете ли вы попробовать перенести логику получения даты в файл машинописного текста и установить переменную onInit, привязать max к этой переменной и проверить?
Вы можете сделать это просто с помощью HTML:
<input type = "number" oninput = "if (value > (new Date()).getFullYear()) alert('Year exceeds current year')">
Если вы действительно хотите сделать это с помощью Angular, вам нужно создать собственный валидатор, который вы можете найти по приведенной ниже ссылке:
Мин. / Макс. Валидатор в Angular 2 Final
Если вы используете Angular 6, вы можете использовать валидаторы min и max, которые вы можете найти по приведенной ниже ссылке:
https://angular.io/api/forms/Validators#min
@ niccoicco9 Не обращайте внимания на рекомендацию «копировать / вставить». value будет переменной в вашей модели, которую вы хотите проверить, и будет отличаться для каждого элемента.
Затем используйте функцию ввода: <input type = "number" (input) = "yearValidation ($ event.target.value)"> Объявите эту функцию в ts: yearValidation (a) {if (parseInt (a)> (new Date ( )). getFullYear ()) {alert ('Год превышает текущий год')}}
Предлагаю вам просто проверить функцию save().
Это может быть так:
if ((new Date()).getFullYear() < this.season.Year) {
//display an error message, maybe using alert or toast
}
Вы читали документацию по диапазону? developer.mozilla.org/en-US/docs/Web/HTML/Element/input/rang e кажется довольно простым, чтобы установить макс.