Предельное значение в текстовом поле в Angular для бота max

Question

Я работаю в Angular 7. Я хочу добавить свойство min и max в текстовое поле, но при этом я сталкиваюсь с проблемой

  <div>
     <input type='text' [(ngModel)]="toPay" max="20000" min="{{balanceData['res'].toPay}}"   style='width:50%' >
    <p> Please do not pay more then 20,000 and less then required money</p>
    </div>

Answer 1

Лучше обрабатывать этот тип кода с помощью функции, а не с помощью обычной функции min max, поскольку вы обрабатываете всю проверку числовых данных.

Является ли min max длиной, обычно используемой для длины значения.например: ваше минимальное значение равно 10, поэтому его длина должна быть 10 или больше.

Таким образом, код будет следующим:

HTML-часть

<div>
  <input type='text' [(ngModel)]="toPay" (change)="onValChange()" style='width:50%' >
<p style="color: red" *ngIf="error"> Please do not pay more then 20,000 and less then {{balanceData['res']?.toPay}} in money</p>
</div>

Компонентная часть

export class AppComponent  {
  name = 'Angular';
  balanceData: any = {};
  toPay = '';
  error: boolean;
  constructor() {
    this.balanceData['res'] = {};
    this.balanceData['res'].toPay = 100;
    // this.toPay = '';
  }
  onValChange() {
    // console.log('Call');
    if (+this.toPay < this.balanceData.res.toPay || +this.toPay >20000){
      this.error = true;
    } else {
      this.error = false;
    }
  }
}

Я думаю, что таким образом может быть лучше обработать ошибку, иначе вы можете сделать директиву для ее повторного использования.

ONLINE DEMO

Answer 2

попробуйте изменить type = "number" из type = "text"

, потому что для типа "text" он не имеет атрибутов min и max