如何在Angular中仅允许整数？

Question

我在HTML中有一个数字输入框，我想让它成为整数，而不是浮点数。

所以，如果我有这个：

<input type="number" ng-model="person.age" />

Angular将认为18.4的值是有效的。我该如何解决这个问题？

- Yulian

---

使用ng-pattern来实现。ng-pattern="/^[0-9]+$/" - Hadi J

@hadiJZ - 看起来是个好主意。你能帮我找到需要的正则表达式吗？ - Yulian

Answer 1

function Main($scope) {

     $scope.regex = "/^-?[0-9][^\.]*$/";
   }

input.ng-dirty.ng-invalid { color: red }

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app>
    <div ng-controller="Main">
        <form name="form">
   <input type="number" ng-model="person.age" ng-pattern="/^-?[0-9][^\.]*$/"/>
           <input type="number" ng-model="person.age1" ng-pattern="{{regex}}" />
        </form>
    </div>
</div>

试一下这个

 $scope.regex = "/^-?[0-9][^\.]*$/";

<input type="number" ng-model="person.age" ng-pattern="{{regex}}"/>

- Hadi J

---

是的，我认为它运行得相当不错。谢谢，伙计。我会测试它，当我确定一切都正确无误时，我会选择你的答案作为最佳答案。 - Yulian

现在它不允许负值。 - Yulian

到目前为止，还有一件事情。正则表达式认为像“16。”或“0。”这样的值是有效的。如何也排除“.”（点）呢？ - Yulian

我运行了这段代码片段，它完美地工作了，但在我的应用程序中却不一样。实际上，它仍然允许点，并且只能使用直接键入到ng-pattern属性中的正则表达式来处理作用域变量。也许这与Angular版本有关。我正在使用1.4.6版本。 - Yulian

使用这个“0123123123”，你的“/^-?[0-9][^.]*$/”将无法工作。此外，您将能够输入“+”和“.”符号。 - Rantiev

Answer 2

我将分享我的代码的一部分。
在我的.ts文件中，我有以下代码：

import { FormBuilder, FormGroup, Validators } from '@angular/forms';
...
export class IntegerComponent implements OnInit {
fgInteger: FormGroup;
...
constructor(private formBuilder: FormBuilder) { }

  ngOnInit(): void {
    this.fgInteger = this.formBuilder.group({
      amount: ['', [Validators.required, ..., Validators.pattern('^\\d+$')]]
    });
  }
}

这是我使用的.ts模式：

• '^' 这是模式的开始。
• '\d' 意味着该值为一个数字（0-9）。
• '+' 表示此模式应使用多次。
• '$' 这是模式的结尾。

此外，在我的.html文件中，我有以下代码：

<form id="fgInteger" [formGroup]="fgInteger" novalidate #fform="ngForm" (ngSubmit)="onSubmit()">
     <mat-form-field appearance="outline">
          <mat-label>Amount:</mat-label>
          <input name="amount" formControlName="amount" type="number" min="1" step="1" matInput placeholder="Enter the amount.">
     </mat-form-field>
 </form>

顺便说一下，我正在使用Angular Material进行工作。

- Alvaro ML

---

这并没有真正回答如何在Angular中实现它的问题。这只是如何在标准HTML中实现它。 - Yinzara

你说得对！那么，我会更新我的答案。 - Alvaro ML

我的回答已更新！ - Alvaro ML

Answer 3

你也可以使用这个ng-pattern="/^(0|\-?[1-9][0-9]*)$/"。

- Mohaimin Moin

Answer 4

这对我起作用了。

<input type="number" step="1" min="0">

- ian korkie

---

这个问题是你仍然可以手动输入类似18.4的内容。 - Huantao

Answer 5

这里有另一个选项，对我来说非常有效。它不允许用户输入非整数值，但如果无效，则拦截键盘输入并防止字符被键入。

<input type="number" min="0" oninput="validity.valid||(value='');" maxlength="3" placeholder="Quantity"/>

- gadildafissh