general-input-components v0.0.3

GeneralInputComponents

This library was generated with Angular CLI version 10.1.6.

Installazione

npm i general-input-components

in app.module.ts:

import { InputBootstrapComponentsModule } from 'general-input-components';

imports: InputBootstrapComponentsModule

Esempio di uso

Running unit tests

Run ng test general-input-components to execute the unit tests via Karma.

Author

Il componente è stato sviluppato da @Vito Buonsanto email contatto: buonsantovito@gmail.com

Versione

V.0.0.2

Il componente gestisce i casi di input-text di tipo string e numerici. Il componente gestisce le textarea. Il componente gestisce i datePicker Il componente è compatibile con la validazione Bootstrap che usa il Template driven Validation.

Desrizone dei componenti

** INPUT-TEXT **

** INPUT **** @Input() inputData: string; -> input del dato @Input() name: string; -> nome del componente @Input() label: string; -> ciò che viene mostrato nella label @Input() isDisabled: boolean; -> disabilitato @Input() isRequired: boolean; -> controllo required del campo @Input() maxLength: number; -> lunghezza massima del campo @Input() minLength: number; -> lunghezza minima del campo @Input() placeholder: string; -> placeholder da mostrare @Input() autocomplete: any; -> disabilita autocomplete con autocomplete="'off'" @Input() blockCopyPaste: boolean; -> disabilita copy paste cut

@Input() upperCase: boolean; -> true/false caratteri maiuscoli @Input() lowerCase: boolean; -> true/false caratteri minuscoli @Input() onlyNumber: boolean; -> true/false solo numeri non decimali @Input() decimals: number; -> true/false solo numeri specificando i decimali @Input() optionsNumberBetween: -> { min: number, max: number, errore: string }; min: numero minimo(numero/null) max: numero massimo (numero/null) errore: errore da mostare (opzionale) @Input() regexControl: -> { regex: string, errore: string }; regex: stringa per formare la regex (obbligatoria) errore: errore da mostare (opzionale) @Input() codiceFiscale: -> { cf: boolean, personaFisica: boolean, checkUltimoCarattere: boolean } / boolean; -> leggi sezione cf @Input() errori: Array -> possibilità di inserire una serie di errori esterni che renderanno invalido il componente. Le stringhe verranno mostrate a video all'utente segnalando l'errore

** OUTPUT **** @Output() dateOut = new EventEmitter(); -> output di NgModel per aggiungerlo ai controlli del tuo form @Output() modelOut = new EventEmitter(); -> output del valore del campo

Nella cartella esempio vi sono diversi esempi di utilizzi e combinazioni del componente.

CF: regexCF: (0-9{11}|a-zA-Z{6}0-9{2}a-zA-Z{2}a-zA-Z{3}a-zA-Z) 1)Passando l'attributo codiceFiscale = "true" verrà controllato che il codice fiscale rispetti la seguente regola: 11 caratteri numerici 16 caratteri alfanumerici che rispettano la regex regexCF 2)Passando l'attributo codiceFiscale = codiceFiscale="{ cf:true , personaFisica: true}" verrà controllato che il codice fiscale rispetti la seguente regola: 16 caratteri alfanumerici che rispettano la regex regexCF 3)Passando l'attributo codiceFiscale="{ cf:true , personaFisica: true, checkUltimoCarattere: true }" verrà controllato che il codice fiscale rispetti la seguente regola: 16 caratteri alfanumerici che rispettano la regex regexCF e controlla che l'ultimo carattere del cf sia corretto rispetto ai precedenti

** TEXTAREA **

** INPUT **** @Input() inputData: string; -> input del dato @Input() name: string; -> nome del componente @Input() label: string; -> ciò che viene mostrato nella label @Input() isDisabled: boolean; -> disabilitato @Input() isRequired: boolean; -> controllo required del campo @Input() maxLength: number; -> lunghezza massima del campo (se c'è appare un contatore) @Input() minLength: number; -> lunghezza minima del campo @Input() placeholder: string; -> placeholder da mostrare @Input() blockCopyPaste: boolean; -> disabilita copy paste cut

@Input() upperCase: boolean; -> true/false caratteri maiuscoli @Input() lowerCase: boolean; -> true/false caratteri minuscoli @Input() regexControl: -> { regex: string, errore: string }; regex: stringa per formare la regex (obbligatoria) errore: errore da mostare (opzionale) @Input() rows: numbers -> numbero di rows

** OUTPUT **** @Output() dateOut = new EventEmitter(); -> output di NgModel per aggiungerlo ai controlli del tuo form @Output() modelOut = new EventEmitter(); -> output del valore del campo

Nella cartella esempio vi sono diversi esempi di utilizzi e combinazioni del componente.

** CHECKBOX **

** INPUT **** @Input() textLabel; -> label da mostrare @Input() model; -> dato da passare in input @Input() id; -> identificativo checkbox @Input() isRequired: boolean; -> con isRequired true si intende che la checkbox per essere valida deve avere valore true

** OUTPUT ****

@Output() isCheckedOut = new EventEmitter(); -> output di NgModel per aggiungerlo ai controlli del tuo form @Output() value = new EventEmitter(); -> output del valore del campo

** DATEPICKER **

** INPUT **** @Input() isRequired: boolean; -> controllo required del campo @Input() isDisabled: boolean; -> controllo disabilitazione del campo @Input() dateIn: string; -> dato da passare in input @Input() label: string; -> label da mostrare @Input() options: OptionsDatePicker; -> @Input() name: string; -> identificativo checkbox

@Input() errori: []; Array -> possibilità di inserire una serie di errori esterni che renderanno invalido il componente. Le stringhe verranno mostrate a video all'utente segnalando l'errore ** OUTPUT **** @Output() dateOut = new EventEmitter(); @ViewChild('myControl') myControl: NgModel; @Output() modelOut = new EventEmitter();