angular-utils-ar v2.5.5

Angular Utils Alexis - Ronny

Installation

To install this library, run:

$ npm i angular-utils-ar --save

Validators

angular2 built-in validators

• required
• minlength
• maxlength
• pattern

custom validators

• rangeLength
• min
• gt
• gte
• max
• lt
• lte
• range
• digits
• number
• url
• email
• date
• minDate
• maxDate
• dateISO
• creditCard
• json
• base64
• phone
• uuid
• equal
• notEqual
• equalTo
• notEqualTo

Usage

template driven

import FormsModule and CustomFormsModule in app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { CustomFormsModule } from 'ng2-validation'

import { AppComponent } from './app.component';

@NgModule({
    imports: [BrowserModule, FormsModule, CustomFormsModule],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule {
}

rangeLength

<input type="text" [(ngModel)]="model.field" name="field" #field="ngModel" [rangeLength]="[5, 9]"/>
<p *ngIf="field.errors?.rangeLength">error message</p>

min

<input type="number" [(ngModel)]="model.field" name="field" #field="ngModel" [min]="10"/>
<p *ngIf="field.errors?.min">error message</p>

gt

<input type="number" [(ngModel)]="model.field" name="field" #field="ngModel" [gt]="10"/>
<p *ngIf="field.errors?.gt">error message</p>

gte

<input type="number" [(ngModel)]="model.field" name="field" #field="ngModel" [gte]="10"/>
<p *ngIf="field.errors?.gte">error message</p>

max

<input type="number" [(ngModel)]="model.field" name="field" #field="ngModel" [max]="20"/>
<p *ngIf="field.errors?.max">error message</p>

lt

<input type="number" [(ngModel)]="model.field" name="field" #field="ngModel" [lt]="20"/>
<p *ngIf="field.errors?.lt">error message</p>

lte

<input type="number" [(ngModel)]="model.field" name="field" #field="ngModel" [lte]="20"/>
<p *ngIf="field.errors?.lte">error message</p>

range

<input type="number" [(ngModel)]="model.field" name="field" #field="ngModel" [range]="[10, 20]"/>
<p *ngIf="field.errors?.range">error message</p>

digits

<input type="text" [(ngModel)]="model.field" name="field" #field="ngModel" digits/>
<p *ngIf="field.errors?.digits">error message</p>

number

<input type="text" [(ngModel)]="model.field" name="field" #field="ngModel" number/>
<p *ngIf="field.errors?.number">error message</p>

url

<input type="text" [(ngModel)]="model.field" name="field" #field="ngModel" url/>
<p *ngIf="field.errors?.url">error message</p>

email

<input type="text" [(ngModel)]="model.field" name="field" #field="ngModel" email/>
<p *ngIf="field.errors?.email">error message</p>

date

<input type="text" [(ngModel)]="model.field" name="field" #field="ngModel" date/>
<p *ngIf="field.errors?.date">error message</p>

minDate

<input type="text" [(ngModel)]="model.field" name="field" #field="ngModel" minDate="2016-09-09"/>
<p *ngIf="field.errors?.minDate">error message</p>

maxDate

<input type="text" [(ngModel)]="model.field" name="field" #field="ngModel" maxDate="2016-09-09"/>
<p *ngIf="field.errors?.maxDate">error message</p>

dateISO

<input type="text" [(ngModel)]="model.field" name="field" #field="ngModel" dateISO/>
<p *ngIf="field.errors?.dateISO">error message</p>

creditCard

<input type="text" [(ngModel)]="model.field" name="field" #field="ngModel" creditCard/>
<p *ngIf="field.errors?.creditCard">error message</p>

json

<input type="text" [(ngModel)]="model.field" name="field" #field="ngModel" json/>
<p *ngIf="field.errors?.json">error message</p>

base64

<input type="text" [(ngModel)]="model.field" name="field" #field="ngModel" base64/>
<p *ngIf="field.errors?.base64">error message</p>

phone

<input type="text" [(ngModel)]="model.field" name="field" #field="ngModel" phone="CN"/>
<p *ngIf="field.errors?.phone">error message</p>

details see libphonenumber

uuid

<input type="text" [(ngModel)]="model.field" name="field" #field="ngModel" [uuid]="'all'"/>
<p *ngIf="field.errors?.uuid">error message</p>

default: all

support

• 3
• 4
• 5
• all

equal

<input type="text" [(ngModel)]="model.field" name="field" #field="ngModel" [equal]="'xxx'"/>
<p *ngIf="field.errors?.equal">error message</p>

equal

<input type="text" [(ngModel)]="model.field" name="field" #field="ngModel" [notEqual]="'xxx'"/>
<p *ngIf="field.errors?.notEqual">error message</p>

equalTo

<input type="password" ngModel name="password" #password="ngModel" required/>
<p *ngIf="password.errors?.required">required error</p>
<input type="password" ngModel name="certainPassword" #certainPassword="ngModel" [equalTo]="password"/>
<p *ngIf="certainPassword.errors?.equalTo">equalTo error</p>

notEqualTo

<input type="text" ngModel name="password" #password="ngModel" required/>
<p *ngIf="password.errors?.required">required error</p>
<input type="password" ngModel name="certainPassword" #certainPassword="ngModel" [notEqualTo]="password"/>
<p *ngIf="certainPassword.errors?.equalTo">equalTo error</p>

model driven

import ReactiveFormsModule in app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ReactiveFormsModule } from '@angular/forms';

import { AppComponent } from './app.component';

@NgModule({
    imports: [BrowserModule, ReactiveFormsModule],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule {
}

import CustomValidators in app.component.ts

import { Component } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';
import { CustomValidators } from 'ng2-validation';

@Component({
    selector: 'app',
    template: require('./app.html')
})
export class AppComponent {
    form: FormGroup;

    constructor() {
        this.form = new FormGroup({
            field: new FormControl('', CustomValidators.range([5, 9]))
        });
    }
}

<input type="text" formControlName="field"/>
<p *ngIf="demoForm.from.controls.field.errors?.rangeLength">error message</p>

rangeLength

new FormControl('', CustomValidators.rangeLength([5, 9]))

min

new FormControl('', CustomValidators.min(10))

gt

new FormControl('', CustomValidators.gt(10))

max

new FormControl('', CustomValidators.max(20))

lt

new FormControl('', CustomValidators.lt(20))

range

new FormControl('', CustomValidators.range([10, 20]))

digits

new FormControl('', CustomValidators.digits)

number

new FormControl('', CustomValidators.number)

url

new FormControl('', CustomValidators.url)

email

new FormControl('', CustomValidators.email)

date

new FormControl('', CustomValidators.date)

minDate

new FormControl('', CustomValidators.minDate('2016-09-09'))

maxDate

new FormControl('', CustomValidators.maxDate('2016-09-09'))

dateISO

new FormControl('', CustomValidators.dateISO)

creditCard

new FormControl('', CustomValidators.creditCard)

json

new FormControl('', CustomValidators.json)

base64

new FormControl('', CustomValidators.base64)

phone

new FormControl('', CustomValidators.phone('zh-CN'))

uuid

new FormControl('', CustomValidators.uuid('3'))

equal

new FormControl('', CustomValidators.equal('xxx'))

notEqual

new FormControl('', CustomValidators.notEqual('xxx'))

equalTo

let password = new FormControl('', Validators.required);
let certainPassword = new FormControl('', CustomValidators.equalTo(password));

this.form = new FormGroup({
  password: password,
  certainPassword: certainPassword
});

<form [formGroup]="form">
  <input type="password" formControlName="password"/>
  <p *ngIf="form.controls.password.errors?.required">required error</p>
  <input type="password" formControlName="certainPassword"/>
  <p *ngIf="form.controls.certainPassword.errors?.equalTo">equalTo error</p>
</form>

notEqualTo

let password = new FormControl('', Validators.required);
let certainPassword = new FormControl('', CustomValidators.notEqualTo(password));

this.form = new FormGroup({
  password: password,
  certainPassword: certainPassword
});

<form [formGroup]="form">
  <input type="password" formControlName="password"/>
  <p *ngIf="form.controls.password.errors?.required">required error</p>
  <input type="password" formControlName="certainPassword"/>
  <p *ngIf="form.controls.certainPassword.errors?.notEqualTo">notEqualTo error</p>
</form>

Modules

• AuthModule
  • AuthGuard
  • AuthService
  • TokenService
  • ChangePasswordManager
  • LoginManager
• ButtonGoToModule

  • 			<button-go-to></button-go-to>
    			```
    			- Inputs:
    			  - srcImage: string = "./assets/img/btt.png"

• CoreModule
  • CrudModule
  • CrudService

  • 			<ng-container [crud-create]></ng-container>
    			```
    			- Outputs:
    			  - crudClick = new EventEmitter()

  • 			<ng-container [crud-read]></ng-container>
    			```
    			- Outputs:
    			  - crudClick = new EventEmitter()

  • 			<ng-container [crud-update]></ng-container>
    			```
    			- Outputs:
    			  - crudClick = new EventEmitter()

  • 			<ng-container [crud-delete]></ng-container>
    			```
    			- Outputs:
    			  - crudClick = new EventEmitter()

  • ConfigService - Outputs: - onShowFilter = new EventEmitter()
  • HttpBaseService
  • FormTemplateModule - SingleForm - FormManager

  • 			<ng-container [acFocus]></ng-container>
    			```

  • 			<form-template></form-template>
    			```
    			- Inputs:
    			  -	formTitle: string = "Mantenimiento"
    			  - icon: string = "fa fa-edit"
    			  - showIconTitle: boolean = true
    			  - form: NgForm
    			  - showOkButton: boolean = true
    			  - okButtonLabel: string = "Guardar"
    			  - okButtonIcon: string = "fa fa-floppy-o"
    			  - okButtonColor: string = "btn-primary"
    			  - closeButtonStyle = new Object()
    			  - okAndNew: boolean
    			  - showOkAndNew: boolean = true
    			  - okAndNewLabel: string = "Guardar y nuevo"
    			  - showCancelButton: boolean = true
    			  - cancelButtonLabel: string = "Cancelar"
    			  - cancelButtonIcon: string = ""
    			  - cancelButtonColor: string = "btn-secondary"
    			  - showHeader: boolean = true
    			  - showCloseButton: boolean = true
    			  - busy: boolean
    			  - adding: boolean
    			  - keyboard: boolean = true
    			  - okKeyCode: number = 115
    			  - cancelKeyCode: number = 27
    			- Outputs:
    			  - okAndNewChange = new EventEmitter<boolean>()
    			  - onActionChange = new EventEmitter()
    			  - onBusyChange = new EventEmitter()
    			  - addingChange = new EventEmitter()

  • ModalFormService
  • ListTemplateModule - ListManager - `html

    		  ```
    		  - Inputs:
    			- showPagination: boolean = true
    			- showToolbar: boolean = true
    			- showHeader: boolean = true
    			- showAddButton: boolean = true
    			- showCardLayout: boolean = true
    			- listTitle: string = "Lista"
    			- addButtonLabel: string = "Agregar nuevo"
    			- addButtonIcon: string = "fa fa-plus"
    			- requestSetting = new RequestSetting()
    			- pgRowsPerPage: number[] = []
    			- pgMaxSize: number = 4
    			- pgBoundaryLinks: boolean = true
    			- pgPreviousText: string = "&lsaquo"
    			- pgNextText: string = "&rsaquo"
    			- pgFirstText: string = "&laquo"
    			- pgLastText: string = "&raquo"
    			- pgShowTotalRows: boolean = true
    		  - Outputs:
    			- onActionChange = new EventEmitter()

  • SearchTemplateModule - `html

    		  ```
    		  - Inputs:
    			- showPagination: boolean = true
    			- modalSize: string = "modal-xl"
    			- service: ServiceManager<any>
    			- titleModal: string = "Busqueda"
    			- filter: boolean = true
    			- columns = new Array<SearchColumn>()
    			- dataKey: string = ""
    			- pgRowsPerPage = new Array<number>()
    			- pgMaxSize: number = 4
    			- pgBoundaryLinks: boolean = true
    			- pgPreviousText: string = "&lsaquo"
    			- pgNextText: string = "&rsaquo"
    			- pgFirstText: string = "&laquo"
    			- pgLastText: string = "&raquo"
    			- pgShowTotalRows: boolean = true
    		  - Outputs:
    			- onSearch = new EventEmitter()

  • SearchContentModule - `html

    		  ```
    		  - Inputs:
    			- searchTitle: string = "Busqueda"
    			- service: IServiceDataLoader<any>
    			- columns: SearchColumn[]
    			- value: any
    			- host: string //'modal | overlay'
    			- pgMaxSize: number = 4
    			- pgBoundaryLinks: boolean = true
    			- pgPreviousText: string = "&lsaquo"
    			- pgNextText: string = "&rsaquo"
    			- pgFirstText: string = "&laquo"
    			- pgLastText: string = "&raquo"
    			- pgShowTotalRows: boolean = true
    			- method: string = "GetPage"
    			- activeColumn: SearchColumn
    		  - Outputs:
    			- onClose = new EventEmitter()
    			- okAndNewChange = new EventEmitter<SearchColumn>()
    		- SearchModalService
    		- VisibleColumnsPipe
    		  - ```html
    			<ng-container> {{value | visibleCols}} </ng-container>
    			```
    		- SearchOverlayModule
    		  - ```html
    			<search-overlay></search-overlay>
    			```
    			- Inputs:
    			  - searchTitle: string
    			  - service: IServiceDataLoader<any>
    			  - columns: Array<SearchColumn>
    			  - value: any
    			- Outputs:
    			  - onClose = new EventEmitter()

  • appInjector
  • ComponentManager
  • SearchService
  • ServiceManager
  • ServiceBase
  • DataService
  • MsgBoxModule - `html

    		  ```
    		- MsgBoxService

• DirectiveModule

  • 			<input trim />
    			```

  • 			<textarea trim />
    			```

  • 			<textarea [autosize]></textarea>
    			```

  • 			<ng-container [autoScroll]></ng-container>
    			```

  • 			<ng-container [lazyLoader]></ng-container>
    			```
    			- Outputs:
    			  - onToggle = new EventEmitter()

  • 			<ng-container [mailTo]></ng-container>
    			```

  • 			<ng-container [cNumber]></ng-container>
    			```
    			- Inputs:
    			  - cFormat") format = "1.2-2"
    			  - cAlign") align = "right"
    			  - cAllowNegative") allowNegative = true
    			  - cNegativeColor") negativeColor = ""

  • 			<ng-container [objectWatcher]></ng-container>
    			```
    			- Outputs:
    			  - onPropertyChanged = new EventEmitter()

• InputWrapperModule

  • 			<ng-container [input-wrapper]></ng-container>
    			```
    			- Inputs:
    			  - labelName = ""
    			  - labelFor = ""

• PaginationARModule

  • 			<pagination-ar></pagination-ar>
    			```
    			- Inputs:
    			  - page = new Page()
    			  - rowsPerPage: number[] = []
    			  - maxSize: number = 4
    			  - boundaryLinks: boolean = true
    			  - previousText: string = "&lsaquo"
    			  - nextText: string = "&rsaquo"
    			  - firstText: string = "&laquo"
    			  - lastText: string = "&raquo"
    			  - showTotalRows: boolean = true
    			  - showPageSize: boolean = true
    			- Outputs:
    			  - onPaginate = new EventEmitter<Page>()

• PipeModule

  • 			<ng-container> {{value | customFilter}} </ng-container>
    			```

  • 			<ng-container> {{value | identification}} </ng-container>
    			```

  • 			<ng-container> {{value | phone}} </ng-container>
    			```

  • 			<ng-container> {{value | safe}} </ng-container>
    			```

  • 			<ng-container> {{value | splitFilter}} </ng-container>
    			```

• SwitchModule

  • 			<ng-container [dSwitch]></ng-container>
    			```

  • 			<ng-container [switch]></ng-container>
    			```
    			- Inputs:
    			  - size: string = "switch-sm"
    			  - color: string = "switch-secondary"
    			  - dataKey: string = ""
    			  - labelName: string = ""
    			  - labelRightLocation: boolean = true
    			  - switchStyle: Object = new Object()
    			  - breakLine = false

• UploadButtonModule

  • UploadButtonService

  • 			<upload-btn></upload-btn>
    			```
    
    			- Inputs:
    			  - btnLabel: string = "Cargar archivo"
    			  - btnClass: string = "btn-primary"
    			  - acceptFiles: string = ""
    			  - url: string = ""
    			  - maxSizeMB: number = 5
    			  - maxFiles: number = 1
    			  - icon: string = "fa-cloud-upload"
    			  - showIcon: boolean = true
    			- Outputs:
    
    			  - onSuccess = new EventEmitter<any>()
    			  - onError = new EventEmitter<any>()

Example config.json

{
  "config": {
	"active": "dev",
	"apps": [
	  {
		"key": "dev",
		"api": "http://your-ip/",
		"report": "http://your-ip/"
	  },
	  {
		"key": "prod",
		"api": "http://your-ip/",
		"report": "http://your-ip/"
	  }
	],
	"AuthRoute": {
	  "LoginSegment": "Account/Login",
	  "RegisterSegment": "Account/Register",
	  "LogOutSegment": "Account/Logout",
	  "UpdateTokenSegment": "Account/UpdateToken",
	  "ChangePasswordSegment": "Account/ChangePassword",
	  "LoginUrl": "/login",
	  "ChangePasswordUrl": "/change-password"
	},
	"AuthConfig": {
	  "TokenName": "token",
	  "RefreshTokenName": "refresh_token",
	  "HeaderName": "Authorization",
	  "HeaderPrefix": "Bearer",
	  "NoJwtError": false,
	  "TokenStorage": 1
	}
  }
}

enum TokenStorage {
  SESSION_STORAGE = 0,
  LOCAL_STORAGE = 1
}

License

MIT © Alexis Castro Ronny Zapata