如何在Angular中只允许整数？答案

【问题标题】：How to allow only integer numbers in Angular?如何在Angular中只允许整数？
【发布时间】：2016-06-30 18:50:33
【问题描述】：

我的 HTML 中有一个数字输入，我希望它是一个整数，而不是浮点数。

所以，如果我有这个：

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

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

【问题讨论】：

对此使用 ng-pattern。 ng-pattern="/^[0-9]+$/"
@hadiJZ - 似乎是个好主意。你能帮我解决我需要的正则表达式吗？

标签： angularjs validation input numbers integer

【解决方案1】：

这是另一个对我很有用的选项。它不允许用户输入非整数值，但如果无效则截取键盘输入并阻止输入字符。

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

【讨论】：

【解决方案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)。
'+' 表示该模式应该使用超过 1 次。
'$'模式到此结束。

另外，在我的 .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。

【讨论】：

这并没有真正回答如何在 Angular 中做到这一点的问题。这将是如何在标准 HTML 中做到这一点。
你是对的！所以，我会更新我的答案。
我的答案更新了！

【解决方案3】：

这对我有用。

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

【讨论】：

【解决方案4】：

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}}"/>

【讨论】：

是的，我认为它运作良好。谢啦。我会测试它，当我确定一切都正确时，我会选择你的答案作为最佳答案。
它现在不允许负值。
到目前为止的最后一件事。正则表达式考虑像“16”这样的值。或“0”。有效。如何排除“。” （点）也？
我运行了代码 sn-p，它运行良好，但在我的应用程序中运行不一样。事实上，它仍然允许点和 in 不适用于范围变量，只能使用直接输入 ng-pattern 属性的正则表达式。也许这与 Angular 版本有关。我正在使用 1.4.6
有了这个 "0123123123" 你的 "/^-?[0-9][^\.]*$/" 将不起作用。您也可以输入“+”和“。”标志

【解决方案5】：

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

【讨论】：