如何在Angular中只允许整数？

Posted 2023-02-25

【中文标题】如何在Angular中只允许整数？

【英文标题】：How to allow only integer numbers in 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 - 似乎是个好主意。你能帮我解决我需要的正则表达式吗？

【参考方案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]*)$/"。