Как ограничить пользователя не вводить десятичные значения в Angular?

Question

Я хочу ограничить пользователя не вводить десятичные значения, а также не менее ста. Если пользователь вводит значение меньше 100, на дисплее появляется сообщение об ошибке «Минимальное значение равно 100» & Если пользователь вводит значение в десятичном виде (например, 138.01), на дисплее появляется сообщение об ошибке «Десятичные значения недопустимы». Пожалуйста, помогите !!!

Пример Stackblitz того, что я делаю.

Answer 1

Вы можете использовать pattern="^[0-9]+([0-9]{0,0})?$" step="1".

Это работает на вашем примере с Stackbliz

<div class="form-group">
    <label>Enter Coins to Withdraw</label>
    <input class="form-control" formControlName="withdraw_coins" placeholder="min. 100" [ngClass]="{ 'is-invalid': submitted && f.withdraw_coins.errors }" pattern="^[0-9]+([0-9]{0,0})?$" step="1">
    <div *ngIf="submitted && f.withdraw_coins.errors" class="invalid-feedback">
        <div *ngIf="f.withdraw_coins.errors.required">Withdraw Coins is required</div>
            <div *ngIf="f.withdraw_coins.errors.min">
               Number should be greater than 100.
             </div>
             <div *ngIf="f.withdraw_coins.errors?.pattern">
                Decimal values are not allowed
              </div>
        </div>
    </div>

Answer 2

Используйте встроенные Angular валидаторы . Вы можете объединить валидаторы, чтобы помочь с вашей проблемой. В частности, методы min и pattern должны решить вашу проблему.

Примечание: при использовании более одного валидатора вам необходимо поместить валидаторы во вложенный массив.

// app.component.ts

this.withdrawCoinsForm = this.fb.group({
    withdraw_coins: ['', [
        Validators.required, 
        Validators.min(100),
        Validators.pattern('[0-9]*')]
    ]
});

// app.component.html

<label>Enter Coins to Withdraw</label>
<input class="form-control" 
      formControlName="withdraw_coins" 
      placeholder="min. 100" 
      [ngClass]="{ 'is-invalid': submitted && f.withdraw_coins.errors }">
<div *ngIf="f.withdraw_coins.errors" class="invalid-feedback">
    <div *ngIf="f.withdraw_coins.errors.min">
        Must be a min of 100!
    </div>
    <div *ngIf="f.withdraw_coins.errors.pattern">
        Must not have a decimal!
    </div>
</div>

Answer 3

Вы можете сделать это просто, указав минимальную длину (3) и шаблон Демо