❤
npm
Sign UpSign In

This package has been deprecated

Author message:

Versión obsoleta, este paquete se ha segmentado en 3 partes: utilscore-ar, prime-ngx-ar y ng-bootstrap-ar

angular-utils-ar
TypeScript icon, indicating that this package has built-in type declarations

2.5.5 • Public • Published

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()
        • onActionChange = new EventEmitter()
        • onBusyChange = new EventEmitter()
        • addingChange = new EventEmitter()
    • ModalFormService
    • ListTemplateModule
      • ListManager
      • <list-template></list-template>
        • 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 
      • <search-template></search-template>
        • Inputs:
          • showPagination: boolean = true
          • modalSize: string = "modal-xl"
          • service: ServiceManager
          • titleModal: string = "Busqueda"
          • filter: boolean = true
          • columns = new Array()
          • dataKey: string = ""
          • pgRowsPerPage = new Array()
          • 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 
      • <search-content></search-content>
        • Inputs:
          • searchTitle: string = "Busqueda"
          • service: IServiceDataLoader
          • 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()
      • SearchModalService
      • VisibleColumnsPipe 
        • <ng-container> {{value | visibleCols}} </ng-container>
      • SearchOverlayModule 
        • <search-overlay></search-overlay>
          • Inputs:
            • searchTitle: string
            • service: IServiceDataLoader
            • columns: Array
            • value: any
          • Outputs:
            • onClose = new EventEmitter()
    • appInjector
    • ComponentManager
    • SearchService
    • ServiceManager
    • ServiceBase
    • DataService
    • MsgBoxModule 
      • <msgbox-content></msgbox-content>
      • 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()

  • 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()
        • onError = new EventEmitter()

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

Readme

Keywords

Package Sidebar

Install

npm i angular-utils-ar

Repository

bitbucket.org/DevTeam_01/angular-utils-ar

Homepage

bitbucket.org/DevTeam_01/angular-utils-ar#readme

Weekly Downloads

193

Version

2.5.5

License

none

Unpacked Size

8.31 MB

Total Files

476

Last publish

Collaborators

  • alcaab
  • ronnysuero
Try on RunKit
Report malware