Как проверить ввод от сохранения 0 или меньше 0 при нажатии кнопки?

Question

Я хочу сохранить длину через номер типа ввода в угловых 6. но длина не должна быть 0 или меньше 0. Он должен показывать ошибку при нажатии кнопки, когда кто-то вводит 0 или меньше, чем значение при вводе. Я пытался добавить min = "1", но это не работает

<mat-form-field class="example-full-width">
                <input matInput type="number" [(ngModel)]="ItemModel.Length" placeholder="Length"  min="1"

                id="Length" name="Length" required>
              </mat-form-field>

Answer 1

Вы можете установить минимальное значение 0,1 и добавить ngclass для красной рамки

    <mat-form-field class="example-full-width">
          <input matInput [(ngModel)]="ItemModel.Length" type="number" name="Length"
            placeholder="Length" [ngClass]="{ 'red': ItemModel.Length <= 0 && 
            greaterthenzero  }" min="0.1" required>
    </mat-form-field>

, нажав кнопку отправки, вы можете проверить значение вашей модели, добавить одно логическое свойство и установить значение true, если значение меньше 0

    submit() {
         this.greaterthenzero = false;
         if (this.ItemModel.Length <= 0) {
             this.greaterthenzero = true;
         }
    }

Answer 2

Попробуйте добавить oninput="this.value = Math.abs(this.value)==0?1: Math.abs(this.value)" в поле ввода, чтобы избежать ввода 0 или отрицательных чисел

<input matInput type="number" [(ngModel)]="modelName" placeholder="Length"  
min="1" id="Length" name="Length"  oninput="this.value = 
Math.abs(this.value)==0?1: Math.abs(this.value)" required />

Демо

---

ИЛИ

попробуйте вручную удалить значения в текстовом поле после ввода неправильных значений,

<input matInput type="number" [(ngModel)]="modelName" placeholder="Length"  min="1" id="Length" name="Length" (change)="valueChange($event)" required>

в компоненте

valueChange(event) {
    if (event.target.value <= 0) {
     this.modelName = '';
      return false;
    }

Демо

Answer 3

Вы должны добавить элемент span со стилем ошибки, например, красный цвет текста, который изначально скрыт, и когда вызывается функция кнопки, проверьте, существует ли значение значения, затем, если нет, укажите диапазон, затем оставьте его скрытым

По умолчанию он не выдаст ошибку.

Если вы хотите сбросить ошибку, по умолчанию попробуйте использовать сопоставление с шаблоном, как это, добавив атрибут pattern

pattern = "^ +? [1-9] \ d * $». На входе.

Answer 4

Опция 1:

Вы можете проверить это по событию нажатия кнопки

if (this.form.value.controlName <= 0) {
    alert("Please enter value greater then 0");        
    return false;
  }

Опция 2:

controlName: ['', [Validators.required, Validators.minLength(0)]]

В HTML

<span *ngIf="f.controlName.errors && f.controlName.hasError('minlength') && f.controlName.touched" class="error-msg">
    {{YOUR MESSAGE}}</span>

В файле TS

get f() { return this.form.controls; }