form-dynamic-angular v6.0.0
FORM DYNAMIC ANGULAR
Description
The form-dynamic is a solution whith objectve is minimize the coding in forms, so one json you can have mutch components in forms in primeng as: input (text and number), select, treeSelect, autocomplete, date, dateTime, textarea, checkbox, button, upload files, list e radioButton
Lib version | Angular version |
---|---|
4.1.3 | 15.2.0 |
5.0.6 | 17.0.0 |
Basic Usage 📑
<form-dynamic-angular title="Exemple" [form]=formmExemple [control]=controlExemple></form-dynamic-angular>
import { TranslateService } from '@ngx-translate/core';
import { UntypedFormBuilder } from '@angular/forms';
import { IForm } from 'form-dynamic-angular';
export class AppComponent implements OnInit {
controlExemple: UntypedFormGroup
formmExemple: IForm[] = []
constructor(
private translate: TranslateService,
private fb: UntypedFormBuilder,
) {}
ngOnInit() {
this.controlExemple = this.fb.group({
user: '',
password: ''
});
this.formmExemple = [
{ label: 'User', col: 'col-lg-6', type: 'text', formControl: 'user' },
{ label: 'Password', col: 'col-lg-6', type: 'text', formControl: 'password' }
]
}
}
Props 💬
Prop | Type | Default | Description |
---|---|---|---|
title | string | '' | Title page |
subTitle | string | '' | Sub title page |
control | UntypedFormGroup | undefined | Controls the form |
form | IForm[] | [] | Input list |
files | File[] | [] | Upload files |
validateForm | boolean | false | if inputs have validation |
buttonsStandard | IButtonsStandard[] | [] | Inputs standard (clean, filter, save, cancel) |
buttonsOptional | IButtonsOptional[] | [] | Inputs optional |
Props Inputs 💬
Prop | Type | Required | type input | Description |
---|---|---|---|---|
label | string | no | all | Label |
type | autocomplete or button or check-box or currency or date or switch or list or mask or number or radio-button or select or select-button or table or text or text-area or tree-select or multi or upload-files or password or photo | yes | all | Type |
disabled | boolean or null | no | button or upload-files | Disabled |
formControl | string | no | all | Controler input |
onChange | Function | no | all | Change |
required | boolean | no | all | If input is required |
placeholder | string | no | all | Placeholder |
options | IOptions[] | no | select or autocomplete or list or multi or radio-button or | Cols table |
colsTable | ICols[] | no | table | Cols table |
forceSelection | ICols[] | no | table | Cols table |
clean | Function | no | tree-select | Function clear |
treeSelectOptions | ITreeSelectOptions[] | no | tree-select | Options tree select |
onCLick | Function | no | button | Function clear |
icon | string | no | button | Icon Button |
textButton | string | no | button | Text Button |
showTime | boolean | no | date | if view time in date |
onFocusDate | Function | no | date | Functions focus |
onFocusDate | Function | no | date | Functions focus |
selectionMode | multiple or range or single | no | date | Amount month is view in date |
minDate | Date | no | date | Min Date |
maxDate | Date | no | date | Max Date |
acceptFiles | string | no | upload-files | Formats accepts |
msgAcceptFiles | string | no | upload-files | Message accepts |
mask | string | no | mask | type mask |
unmask | boolean | no | mask | If control user mask or no |
search | boolean | no | select | If input search |
Usage Inputs
1- Autocomplete | List | Radio-button | Select | Select-button | Multi
import {IOptions } from 'form-dynamic-angular';
controlAutocomplete: UntypedFormGroup
formmAutocomplete: IForm[] = []
options: IOptions[] = [
{ id: 1, descricao: "Fortaleza" },
{ id: 2, descricao: "Maracanaú" }
]
this.controlAutocomplete = this.fb.group({
cities: '',
});
this.formmAutocomplete = [
{ label: 'Cities', col: 'col-lg-6', type: 'autocomplete', formControl: 'cities', options: this.options },
{ label: 'Cities', col: 'col-lg-6', type: 'list', formControl: 'cities', options: this.options },
{ label: 'Cities', col: 'col-lg-6', type: 'radio-button', formControl: 'cities', options: this.options },
{ label: 'Cities', col: 'col-lg-6', type: 'select', formControl: 'cities', options: this.options },
{ label: 'Cities', col: 'col-lg-6', type: 'select-button', formControl: 'cities', options: this.options },
{ label: 'Cities', col: 'col-lg-6', type: 'multi', formControl: 'cities', options: this.options },
]
2- Button
controlAutocomplete: UntypedFormGroup
formmAutocomplete: IForm[] = []
this.controlAutocomplete = this.fb.group({});
this.formmAutocomplete = [
{ textButton: 'Ver cidade', col: 'col-lg-4', type: 'button', onCLick: () => this.click(), icon: 'pi pi-plus', class: 'p-button-outlined' }
]
click() {
console.log("click button")
}
2- Check-box
controlAutocomplete: UntypedFormGroup
formmAutocomplete: IForm[] = []
this.controlAutocomplete = this.fb.group({});
this.formmAutocomplete = [
{ label: 'Ckeck', col: 'col-lg-6', type: 'check-box', formControl: 'ckech' },
]
3- Date
controlAutocomplete: UntypedFormGroup
formmAutocomplete: IForm[] = []
this.controlAutocomplete = this.fb.group({
date: ''
});
this.formmAutocomplete = [
{ label: 'Date', col: 'col-lg-6', type: 'date', formControl: 'date' },
]
4- Switch | Text | Text-area | Number | Password | Currency
controlAutocomplete: UntypedFormGroup
formmAutocomplete: IForm[] = []
this.controlAutocomplete = this.fb.group({
switch: false,
text: '',
number: 0,
textArea: '',
password: '',
currency: 0
});
this.formmAutocomplete = [
{ label: 'Switch', col: 'col-lg-6', type: 'switch', formControl: 'switch' },
{ label: 'Text', col: 'col-lg-6', type: 'text', formControl: 'text' },
{ label: 'Number', col: 'col-lg-6', type: 'number', formControl: 'number' },
{ label: 'TextArea', col: 'col-lg-6', type: 'text-area', formControl: 'textArea' },
{ label: 'Password', col: 'col-lg-6', type: 'password', formControl: 'password' },
{ label: 'Currency', col: 'col-lg-6', type: 'currency', formControl: 'currency' }
]
5- Tree-select
import { ITreeSelectOptions } from 'projects/form-dynamic-angular/src/public-api';
treeSelect: ITreeSelectOptions[] = [{
key: '0',
label: 'Documents',
icon: 'pi pi-fw pi-inbox',
children: [
{
key: '0-0',
label: 'Work',
icon: 'pi pi-fw pi-cog',
children: [
{ key: '0-0-0', label: 'Expenses.doc', icon: 'pi pi-fw pi-file' },
{ key: '0-0-1', label: 'Resume.doc', icon: 'pi pi-fw pi-file', }
]
},
{
key: '0-1',
label: 'Home',
icon: 'pi pi-fw pi-home'
}
]
}]
control: UntypedFormGroup
form: IForm[] = []
this.control = this.fb.group({
treeSelect: ""
});
this.form = [
{ label: "Tree-select", col: 'col-lg-6', type: 'tree-select', formControl: 'installationLocation', treeSelectOptions: this.treeSelect },
]
6- Table
import { ICols } from 'projects/form-dynamic-angular/src/public-api';
rowsTable: any = [{
id: 1,
c1: "teste c1",
c2: "teste c2",
button: { label: "as", icon: "a", onCLick: (id: number) => this.click(id), styleClass: "asd" }
},
{
id: 2,
c1: "asas",
c2: "ad",
button: { label: "ab", icon: "a", onCLick: (id: number) => this.click(id), styleClass: "asd" }
}]
cols: ICols[] = [
{ field: 'c1', header: 'C1' },
{ field: 'c2', header: 'C2' },
{ field: 'button', header: 'Ação' },
]
control: UntypedFormGroup
form: IForm[] = []
this.control = this.fb.group({
table: ""
});
this.form = [
{ label: 'Cities', col: 'col-lg-12', type: 'table', formControl: 'table', rowsTable: this.rowsTable, colsTable: this.cols, class: 'p-datatable-gridlines' }
]
7- Upload-files
control: UntypedFormGroup
form: IForm[] = []
this.control = this.fb.group({
table: ""
});
this.form = [
{ type: 'upload-files', formControl: 'cities', acceptFiles: 'image/*, application/vnd.ms-excel, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/pdf, application/msword', msgAcceptFiles:"Arquivos suportados: PNG, TIF, JPG, PDF, WORD e EXCEL" }
]
8- Mask
control: UntypedFormGroup
form: IForm[] = []
this.control = this.fb.group({
mask: 0
});
this.form = [
{ label: 'Mask', col: 'col-md-12', type: 'mask', mask: "999-999-9999", formControl: 'mask' }
]
Required
control: UntypedFormGroup
form: IForm[] = []
validateForm: boolean = false
buttonsStandard: IButtonsStandard[] = [
{ type: 'save', onCLick: () => this.save(), styleClass: 'p-button-outlined' }
]
this.control = this.fb.group({
mask: new FormControl({ value: 0, validators: Validators.required}),
});
this.form = [
{ label: 'Mask', col: 'col-md-12', type: 'mask', mask: "999-999-9999", formControl: 'mask', required: true }
]
save() {
this.validateForm = true
}
<form-dynamic-angular title="Exemple" [form]=form [control]=control [validateForm]=validateForm [buttonsStandard]=buttonsStandard></form-dynamic-angular>
Translate
Created files
//src/assets/i18n/pt.json
{
"pageLogin": {
"userName": "Usuário",
"password": "Senha"
}
}
//src/assets/i18n/en.json
{
"pageLogin": {
"userName": "Username",
"password": "Password"
}
}
Created input and form
<!--app.component.html-->
<select (change)="uselanguage($event.target.value)">
<option value='pt'>pt</option>
<option value='en'>en</option>
</select>
<form-dynamic-angular title="Login" [form]=formLogin [control]=controlLogin></form-dynamic-angular>
Created function
//app.component.ts
import { TranslateService } from '@ngx-translate/core';
import { UntypedFormBuilder } from '@angular/forms';
import { IForm } from 'form-dynamic-angular';
export class AppComponent implements OnInit {
controlmitigationBarriers: UntypedFormGroup
formLogin: IForm[] = []
constructor(
private translate: TranslateService,
private fb: UntypedFormBuilder,
) {}
ngOnInit() {
this.controlmitigationBarriers = this.fb.group({
username: '',
password: ''
});
this.formLogin = [
{ label: 'pageLogin.userName', col: 'col-lg-6', type: 'text', formControl: 'username' },
{ label: 'pageLogin.password', col: 'col-lg-6', type: 'text', formControl: 'password' }
]
}
uselanguage(language: string) {
this.translate.use(language);
}
}
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago