基于的angular的npm包，用于校验表单

技术支持：[email protected]
示例代码：https://gitee.com/zhtt/angular-demo

示例演示： https://zhtt.gitee.io/angular-demo/great-ngform8/#/form/decimal
示例演示： https://zhtt.gitee.io/angular-demo/great-ngform6/#/form/template

友情链接

great-generator、 great-jsutils、 great-ngform、 great-zorroutils、 great-vue

表单内容校验

引入module

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

验证结果介绍

| 参数 | 名称 | 必带 | 参数类型| | ------ | ------ | ------ | ------ | | errorMsgKey | 错误消息key | 否 | string | | errorMsg | 错误消息内容 | 否 | string |

返回值示例1：

以字节验证为例，指定属性“greatByteLength”，默认返回的错误key为pattern

<input name="byteLength4"
       #byteLength4Box="ngModel" [(ngModel)]="byteLength4"
       greatByteLength="10"
>

{
  "pattern": {
    "errorMsg": "超过最大允许的长度！",
    "maxLength": 10,
    "actualLength": 15
  }
}

返回值示例2：

以字节验证为例，指定属性“greatByteLength、fieldName”，返回的错误key为“fieldName”指定的值

<input name="byteLength4"
       #byteLength4Box="ngModel" [(ngModel)]="byteLength4"
       greatByteLength="10" fieldName="fieldName"
>

{
  "fieldName": {
    "errorMsg": "超过最大允许的长度！",
    "maxLength": 10,
    "actualLength": 15
  }
}

返回值示例3：

以字节验证为例，指定属性“greatByteLength、fieldName、errorMsg”，错误消息的key为：msg

<input name="byteLength4"
       #byteLength4Box="ngModel" [(ngModel)]="byteLength4"
       greatByteLength="10" fieldName="fieldName"
       errorMsgKey="msg"
>

{
  "fieldName": {
    "msg": "最多5个中文或10个英文！",
    "maxLength": 10,
    "actualLength": 15
  }
}

返回值示例4：

以字节验证为例，指定属性“greatByteLength、fieldName、errorMsg、errorMsgKey”，返回的错误key为“fieldName”指定的值，错误消息的key为：errorMessage

<input name="byteLength4"
       #byteLength4Box="ngModel" [(ngModel)]="byteLength4"
       greatByteLength="10" fieldName="fieldName"
       errorMsg="最多5个中文或10个英文"  errorMsgKey="msg"
>

{
  "fieldName": {
    "msg": "最多5个中文或10个英文！",
    "maxLength": 10,
    "actualLength": 15
  }
}

模板驱动表单验证方式

• 1、验证字节长度（通过maxlength控制的是字符长度，由于一个汉字占2个字节，数据库中的varchar类型也是字节长度，这样方便中英文混合时的验证）【模板】

输入参数

| 参数 | 名称 | 必带 | 参数类型| | ------ | ------ | ------ | ------ | | greatByteLength | 开始字节验证 | 是 | string | | fieldName | 错误消息Key，默认pattern | 否 | string | | failName | 错误消息Key | 否 | string | | strict | 是否为严格模式，默认false，设置为true后，超出时无法再继续输入 | 否 |

输出参数

| 参数 | 名称 | 必带 | 参数类型 | | ------ | ------ | ------ | ------ | | maxLength | 最大允许的字节数 | ** | number | | actualLength | 实际字节数 | ** | number |

/** 只需要在input标签上添加 greatByteLength 即可 **/
<input name="byteLength" #byteLengthBox="ngModel" [(ngModel)]="byteLength"
       maxlength="30" minlength="5" required
       greatByteLength="30" fieldName="byteLength" failName="errorMsg"
/** 显示错误信息 **/
<div *ngIf="byteLengthBox.invalid && (byteLengthBox.dirty || byteLengthBox.touched)">
  <div *ngIf="byteLengthBox.errors.required">
    byteLength is required.
  </div>
  <div *ngIf="byteLengthBox.errors.minlength">
    byteLength must be at least 4 characters long.
  </div>
  <div *ngIf="byteLengthBox.errors.byteLength">
    {{byteLengthBox.errors.byteLength.errorMsg}}
  </div>
</div>

• 2、验证手机号【模板】

/** 只需要在input标签上添加greatMobile即可 **/
<input name="mobile" #mobileBox="ngModel" [(ngModel)]="mobile" 
  greatMobile>
/** 显示错误信息 **/
<div *ngIf="mobileBox.invalid && (mobileBox.dirty || mobileBox.touched)">
  {{mobileBox.errors.mobile.errorMsg}}
</div>

• 3、身份证【模板】

/** 只需要在input标签上添加greatIdentityCard即可 **/
<input name="identityCard" #identityCardBox="ngModel" [(ngModel)]="identityCard" 
  greatIdentityCard>
/** 显示错误信息 **/
<div *ngIf="identityCardBox.invalid && (identityCardBox.dirty || identityCardBox.touched)">
  {{identityCardBox.errors.identityCard.errorMsg}}
</div>

• 4、正则验证【模板】

/** 只需要在input标签上添加greatRegexp即可 **/
<input name="regexp" #regexpBox="ngModel" [(ngModel)]="regexp" 
  greatRegexp="^((ht|f)tps?):\/\/([\w\-]+(\.[\w\-]+)*\/)*[\w\-]+(\.[\w\-]+)*\/?(\?([\w\-\.,@?^=%&:\/~\+#]*)+)?">
/** 显示错误信息 **/
<div *ngIf="regexpBox.invalid && (regexpBox.dirty || regexpBox.touched)">
  正则信息不匹配
</div>

如果是取反，需要加inverse="true"，例如不能只输入空格

<input name="address" #addressBox="ngModel" [(ngModel)]="address"
     greatRegexp="^[ ]*$" fieldName="address" inverse="true"
>

• 5、小数验证【模板】

/**
只需要在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>

• 6、mac地址【模板】

/** 只需要在input标签上添加 greatMac 即可 **/
<input name="greatMac" #greatMacBox="ngModel" [(ngModel)]="greatMac" 
  greatMac fieldName="greatMac" >
/** 显示错误信息 **/
<div *ngIf="greatMacBox.invalid && (greatMacBox.dirty || greatMacBox.touched)">
  MAC地址格式有误！
</div>

• 7、url地址【模板】

/** 只需要在input标签上添加 greatUrl 即可 **/
<input name="greatUrl" #greatUrlBox="ngModel" [(ngModel)]="greatUrl" 
  greatUrl fieldName="greatUrl" >
/** 显示错误信息 **/
<div *ngIf="greatUrlBox.invalid && (greatUrlBox.dirty || greatUrlBox.touched)">
  MAC地址格式有误！
</div>

• 8、异步校验【模板】

建议增加[ngModelOptions]属性

| 参数 | 名称 | 必传 | 参数类型 | ------ | ------ | ------ | ------ | | greatAsync | 后台url | 是 | string | | fieldName | 验证失败后属性名，默认pattern | 否 | string | | paramName | 向后台传的参数名 | 是 | string | | [params] | 向后台传的参数集合 | 否 | json |

后台接口返回格式1：

直接返回布尔型：true/false

后台接口返回格式2：

返回json对象

{
  "result":true/false,
  "message":"编码已存在"
}

后台接口返回格式3：

返回json对象

{
  "data":true/false,
  "message":"编码已存在"
}

• 8.1 单个参数示例

/** 只需要在input标签上添加 greatAsync 即可 **/
 <input name="async1" #async1Box="ngModel" [(ngModel)]="async1"   [ngModelOptions]="{ updateOn: 'blur' }"
     greatAsync="http://localhost:3000/organization/unique" 
     fieldName="async1" 
     paramName="code">
/** 显示错误信息 **/
<div *ngIf="async1Box.invalid && (async1Box.dirty || async1Box.touched)">
  机构编码已存在===》{{async1Box.errors|json}}
</div>

• 8.2 多个参数示例

params={"parentId":"234"}

<input name="async" #asyncBox="ngModel" [(ngModel)]="async"   [ngModelOptions]="{ updateOn: 'blur' }"
     greatAsync="http://localhost:3000/organization/unique" 
     fieldName="async" 
     paramName="name" 
     [params]=params>
<div *ngIf="asyncBox.invalid && (asyncBox.dirty || asyncBox.touched)">
  同级机构下，此名称已存在===》{{asyncBox.errors|json}}
</div>

响应表单验证方式

• 1、正则验证【响应】

<input  formControlName="url" id="url" placeholder="网址"
  greatRegexp="^((ht|f)tps?):\/\/([\w\-]+(\.[\w\-]+)*\/)*[\w\-]+(\.[\w\-]+)*\/?(\?([\w\-\.,@?^=%&:\/~\+#]*)+)?">
<div *ngIf="form.get('url').dirty && form.get('url').errors">网址格式有误</div>

如果是取反，需要加inverse="true"，例如不能只输入空格

 <input name="address" #addressBox="ngModel" [(ngModel)]="address"
                 greatRegexp="^[ ]*$" fieldName="address" inverse="true"
          >

• 2、验证字节长度【响应】

ts代码：

name = new FormControl('');

html代码

<input type="text" [formControl]="name" 
  greatByteLength="20" required>
/** 显示错误信息 **/
<div *ngIf="name.dirty && name.errors">
  {{name.errors.pattern}}
</div>

• 3、验证手机号【响应】

  <input type="text" [formControl]="mobile" greatMobile>
  <div *ngIf="mobile.dirty && mobile.errors">
    {{mobile.errors.mobile.errorMsg}}
  </div>

• 4、身份证号【响应】

  <input type="text" [formControl]="identityCard" greatIdentityCard>
  <div *ngIf="identityCard.dirty && identityCard.errors">
    {{identityCard.errors.identityCard.errorMsg}}
  </div>

• 5、小数验证【响应】

/**
只需要在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>

• 6、mac地址【响应】

  <input type="text" [formControl]="mac" greatMac>
  <div *ngIf="mac.dirty && mac.errors">
    {{mac.errors.mac.errorMsg}}
  </div>

• 7、url地址【响应】

  <input type="text" [formControl]="url" greatUrl>
  <div *ngIf="url.dirty && url.errors">
    {{url.errors.url.errorMsg}}
  </div>

• 8、异步校验【模板】

建议增加[ngModelOptions]属性

| 参数 | 名称 | 必传 | 参数类型 | ------ | ------ | ------ | ------ | | greatAsync | 后台url | 是 | string | | fieldName | 验证失败后属性名，默认pattern | 否 | string | | paramName | 向后台传的参数名 | 是 | string | | [params] | 向后台传的参数集合 | 否 | json |

后台接口返回格式1：

直接返回布尔型：true/false

后台接口返回格式2：

返回json对象

{
  "result":true/false,
  "message":"编码已存在"
}

后台接口返回格式3：

返回json对象

{
  "data":true/false,
  "message":"编码已存在"
}

• 8.1 单个参数示例

/** 只需要在input标签上添加 greatAsync 即可 **/
 <input name="async1" [formControl]="async1"   [ngModelOptions]="{ updateOn: 'blur' }"
       greatAsync="http://localhost:3000/organization/unique" 
       fieldName="async1" 
       paramName="code">
/** 显示错误信息 **/
<div *ngIf="async1.dirty && async1.errors">
  {{async1.errors.errorMsg}}
</div>

• 8.2 多个参数示例

params={"parentId":"234"}

<input name="async" [formControl]="async"   [ngModelOptions]="{ updateOn: 'blur' }"
       greatAsync="http://localhost:3000/organization/unique" 
       fieldName="async" 
       paramName="name" 
       [params]=params>
<div *ngIf="async.dirty && async.errors">
  {{async.errors.errorMsg}}
</div>

公共model

CommonModel

1、clone()

2、getPropertyNames()

3、initValueByPropertyName()

4、validate()

5、setValueByJson()

6、copyValueByJson()

7、numberToString()

8、dateToString()

9、static instanceByJson(json)

管道

{{"123"|base64}} {{"MTIz"|base64:'decode'}}

路由切换前确认

{path: 'template', component: TemplateDrivenComponent, canDeactivate: [CanDeactivateGuard]},

  canDeactivate(): Observable<boolean>|boolean {
    if (!this.form.dirty) {
      return true;
    }
    return of(confirm('表单信息修改后未保存，确定离开吗？'));
  }

重置路由

1. 修改routes-routing.module，添加属性：canActivate

{
    path: '',
    component: LayoutDefaultComponent,
    canActivate:[RediectRouterGuard],
    children: [
      { path: 'user', loadChildren: "./users/users.module#UsersModule" },
      { path: 'role', loadChildren: "./role/role.module#RoleModule" },
      { path: 'form', loadChildren: "./form/form.module#FormModule" },
      { path: 'other', loadChildren: "./other/other.module#OtherModule" },
      { path: 'table', loadChildren: "./table/table.module#TableModule" },
    ]
  },

2. 添加全屏布局路由，目前path只能为：fullscreen

  // 全屏布局
  {
      path: 'fullscreen',
      component: LayoutFullScreenComponent,
      children: [
        { path: 'user', loadChildren: "./users/users.module#UsersModule" },
        { path: 'role', loadChildren: "./role/role.module#RoleModule" },
        { path: 'form', loadChildren: "./form/form.module#FormModule" },
        { path: 'other', loadChildren: "./other/other.module#OtherModule" },
        { path: 'table', loadChildren: "./table/table.module#TableModule" },
      ]
  },

service

1、LogService

2、HttpService

get(); post(); delete(); put(); createHeaders(); createHttpParams();

3、SessionStorageService

layout

1、html

<great-layout-full
    [layoutConfig] = "layoutConfig"
  >
    <div class="great-layout-header">
      这是系统头部
    </div>
    <div class="great-layout-left">
      这是左侧菜单
    </div>
    <div class="great-layout-main">
      这是内容主区域
    </div>
    <div class="great-layout-footer">
      这是系统底部
    </div>
  </great-layout-full>

2、css

.great-layout-header{
  height:100%;
  background: #3F51B5;
  color:#FFF;
  line-height: 60px;
  padding-left:24px;
}
.great-layout-header h2{
  margin:0;padding:0;
  letter-spacing: 4px;
}
.great-layout-main{
  background-color: #FFF;
  margin-left:16px;
  padding:10px;
}

3、ts

layoutConfig = {
  headerHeight: 60,
  footerHeight: 60,
  leftWidth: 260
};

4、property

  // 头部高度
  headerHeight:number = 0;
  // 底部高度
  footerHeight:number = 0;
  // 左侧宽度
  leftWidth:number = 0;
  // 主区域宽度
  mainWidth:number = 0;
  // 整体高度偏移量
  heightOffset:number = 0;
  // 整体最大高度
  maxHeight:number = 0;

指令

表格拖拽

  greatTableDragCfg = {
    x:'1250px',
    columnNameWidth: '120px',
  };

  <th
    [style.width]="greatTableDragCfg.projectCodeWidth"
    [greatTableColumnDrag]="greatTableDragCfg"
    columnName="columnNameWidth"
  >columnName</th>

去除空格 greatDrag

<input greatDrag/>
<input greatDrag='left'/>
<input greatDrag='right'/>
<input greatDrag='around'/>

作者当前开发环境1.x

Angular CLI: 6.0.8

Node: 10.13.0

OS: win32 x64

Angular: 6.1.10

rxjs 6.3.3

typescript 2.7.2

作者当前开发环境8.x

Angular CLI: 8.3.12

Node: 10.16.3

Angular: 8.2.11 rxjs 6.4.0

typescript 3.5.3

升级日志

2019.0817

| 版本 | 升级说明 | | ------ | ------ | | v1.1.4 | 布局|

2019.0916

| 版本 | 升级说明 | | ------ | ------ | | v1.1.5 | 异步校验|

2019.1009

| 版本 | 升级说明 | | ------ | ------ | | v8.2.5 | 升级ng到v8| 2024

| 版本 | 升级说明 | |------|--------------------| | v15 | 升级ng到v15 | | rxjs | ~7.8.0(如果不匹配可能会报错) | | zone.js | ~0.12.0(如果不匹配可能会报错) |

感谢你的支持，我将持续优化我的服务，希望为你提供更大的帮助！