README

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

技术支持：554068603@qq.com 示例代码：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

表单内容校验

引入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
```html
/ 只需要在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 *ngIf="byteLengthBox.errors.minlength">
byteLength must be at least 4 characters long.

<div *ngIf="byteLengthBox.errors.byteLength">
{{byteLengthBox.errors.byteLength.errorMsg}}


```

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="^[ ]*quot; 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="^[ ]*quot; 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)

管道

路由切换前确认

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

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

重置路由

修改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" },
    ]
  },

添加全屏布局路由，目前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"
    [lubanTableColumnDrag]="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

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

Usage no npm install needed!

README

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

友情链接

表单内容校验

引入module

验证结果介绍

模板驱动表单验证方式

响应表单验证方式

公共model

1、clone()

2、getPropertyNames()

3、initValueByPropertyName()

4、validate()

5、setValueByJson()

6、copyValueByJson()

7、numberToString()

8、dateToString()

9、static instanceByJson(json)

管道

路由切换前确认

重置路由

service

1、LogService

2、HttpService

3、SessionStorageService

layout

1、html

2、css

3、ts

4、property

指令

表格拖拽

去除空格 greatDrag

作者当前开发环境1.x

作者当前开发环境8.x

升级日志