angular表单验证，数字验证，指定小数位数

最新推荐文章于 2022-12-24 18:48:04 发布

清月晨光

最新推荐文章于 2022-12-24 18:48:04 发布

阅读量3k

点赞数

分类专栏：个人笔记 angular 文章标签：表单小数验证 2位小数

本文链接：https://blog.youkuaiyun.com/ztt_1119/article/details/86708244

版权

angular 同时被 2 个专栏收录

16 篇文章

订阅专栏

个人笔记

13 篇文章

订阅专栏

本文介绍如何使用Angular的great-ngform模块进行表单内容的高级校验，包括数字位数和小数位数的限制。提供了模板驱动和响应式表单的示例代码，以及错误信息的显示方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

表单内容校验

演示地址：http://zhtt.gitee.io/angular-demo/angular/dist/angular/#/form/template

示例代码：https://gitee.com/zhtt/angular-demo/repository/archive/master.zip

资源地址：https://www.npmjs.com/package/great-ngform

其它验证

根据指定正则验证、手机验证、MAC地址验证：https://blog.youkuaiyun.com/ztt_1119/article/details/83351097

安装npm包

npm install great-ngform --save

引入module


import {GreatValidateModule} from "great-ngform";
@NgModule({
  imports: [
    CommonModule,
    GreatValidateModule,
    FormsModule
  ]
})

`模板驱动表单验证方式`


<!--
只需要在input标签上添加greatNumber即可，
greatNumber的值为最大允许的数字位数，
scale的值为最大允许的小数位数
当前示例为：最多输入6位数字，其中小数最多为2位，
也就是当小数为2位时，小数点前面最多为4位。
如果小数为1位时，小数点前面可以为5位。
如果没有小数时，小数点可输入6位。
-->

<input name="decimalDigit" 
       #decimalDigitBox="ngModel" 
       [(ngModel)]="decimalDigit" 
       greatNumber="6" scale="2" 
       fieldName="decimalDigit" >
/** 显示错误信息 **/
<div *ngIf="decimalDigitBox.invalid && (decimalDigitBox.dirty || decimalDigitBox.touched)">
  {{decimalDigitBox.errors.decimalDigit|json}}
</div>

`响应表单验证方式`

<!--
只需要在input标签上添加greatNumber即可，
greatNumber的值为最大允许的数字位数，
scale的值为最大允许的小数位数
当前示例为：最多输入6位数字，其中小数最多为2位，
也就是当小数为2位时，小数点前面最多为4位。
如果小数为1位时，小数点前面可以为5位。
如果没有小数时，小数点可输入6位。
-->
<input type="text" [formControl]="decimalDigit" 
    greatNumber="6" scale="2" fieldName="decimalDigit">
<div *ngIf="decimalDigit.dirty && decimalDigit.errors">
  {{decimalDigit.errors.decimalDigit.errorMsg}}
</div>