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

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/zhaoqingkaitt/article/details/86708244

表单内容校验

其它验证

根据指定正则验证、手机验证、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>