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

表单内容校验

演示地址: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.csdn.net/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>

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值