如何在按钮单击时验证输入不保存 0 或小于 0？答案

【问题标题】：How to validate Input from not saving 0 or less then 0 on button click?如何在按钮单击时验证输入不保存 0 或小于 0？
【发布时间】：2020-02-02 17:28:04
【问题描述】：

我想通过 Angular 6 中的输入类型号保存 Length。但长度不应为 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>

【问题讨论】：

它应该可以工作。如果没有，请提供您的问题的minimal reproducible example。

标签： javascript html angular typescript angular6

【解决方案1】：

选项 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; }

【讨论】：

如果您有任何问题，请告诉我？

【解决方案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 />

Demo

或

尝试在输入错误值后手动删除文本框中的值，

<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;
    }

Demo

【讨论】：

如果有人想设置 0.44 的值应该怎么做？
@MuhammadDaniyal 然后试试我的第二个演示

【解决方案3】：

您必须添加一个带有错误样式的 span 元素，例如最初隐藏的红色文本，当调用按钮函数时检查该值的值是否存在，如果不存在则显示 span，然后将其隐藏

默认情况下不会抛出任何错误。

如果您想默认抛出错误，请尝试通过添加模式属性来使用这样的模式匹配

模式="^+?[1-9]\d*$"。在输入中。

【讨论】：

【解决方案4】：

您可以将最小值设置为 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>

在提交按钮上，您可以检查模型值并添加一个布尔属性，如果值小于 0，则设置为 true

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

【讨论】：