form-dynamic-ajax 7.0.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +423 -0
- package/ng-package.json +10 -0
- package/package.json +14 -0
- package/src/lib/form-dynamic-angular.component.css +132 -0
- package/src/lib/form-dynamic-angular.component.html +412 -0
- package/src/lib/form-dynamic-angular.component.spec.ts +23 -0
- package/src/lib/form-dynamic-angular.component.ts +288 -0
- package/src/lib/form-dynamic-angular.module.ts +73 -0
- package/src/public-api.ts +6 -0
- package/tsconfig.lib.json +14 -0
- package/tsconfig.lib.prod.json +10 -0
- package/tsconfig.spec.json +14 -0
|
@@ -0,0 +1,412 @@
|
|
|
1
|
+
<div>
|
|
2
|
+
<div *ngIf="title" class="div-title">
|
|
3
|
+
<span translate={{title}}></span>
|
|
4
|
+
<div *ngIf="subTitle" class="flex subtitle">
|
|
5
|
+
<span translate={{subTitle}}></span>
|
|
6
|
+
</div>
|
|
7
|
+
<p-divider></p-divider>
|
|
8
|
+
</div>
|
|
9
|
+
<form *ngIf="control" [formGroup]="control">
|
|
10
|
+
<div class="grid">
|
|
11
|
+
<div *ngFor="let item of form" class="{{item.col}} col-12">
|
|
12
|
+
<label *ngIf="item.label && !item.hideLabelTop">{{item.label}}</label>
|
|
13
|
+
<label *ngIf="item.required && item.label" class="danger-text ml-2">*</label>
|
|
14
|
+
|
|
15
|
+
<div class="mt-2">
|
|
16
|
+
<!-- text -->
|
|
17
|
+
<input id={{item.id}} [ngClass]="{
|
|
18
|
+
'ng-invalid ng-dirty':
|
|
19
|
+
validateForm && control.controls[item.formControl].errors
|
|
20
|
+
}" pInputText placeholder={{item.placeholder}} *ngIf="item.type == 'text' || item.type == 'number' "
|
|
21
|
+
type={{item.type}} formControlName={{item.formControl}} class="w-full" />
|
|
22
|
+
|
|
23
|
+
<!-- select -->
|
|
24
|
+
<p-dropdown id={{item.id}} [ngClass]="{
|
|
25
|
+
'ng-invalid ng-dirty':
|
|
26
|
+
validateForm && control.controls[item.formControl].errors
|
|
27
|
+
}" [filter]=item.search emptyFilterMessage="Nenhum dado encontrado"
|
|
28
|
+
emptyMessage="Nenhum dado encontrado" placeholder={{item.placeholder}} styleClass="w-full p-0"
|
|
29
|
+
(onChange)="onChange(item.onChange)" *ngIf="item.type === 'select'" [showClear]="true"
|
|
30
|
+
[options]="item.options" formControlName={{item.formControl}} optionLabel="description"
|
|
31
|
+
(onClear)="clickCLear(item.onCLear)"></p-dropdown>
|
|
32
|
+
|
|
33
|
+
<!-- currency -->
|
|
34
|
+
<p-inputNumber id={{item.id}} *ngIf="item.type === 'currency'" [ngClass]="{
|
|
35
|
+
'ng-invalid ng-dirty':
|
|
36
|
+
validateForm && control.controls[item.formControl].errors
|
|
37
|
+
}" formControlName={{item.formControl}} placeholder={{item.placeholder}} inputStyleClass="w-full"
|
|
38
|
+
styleClass="w-full" (onKeyDown)="onChange(item.onChange)" mode="currency" [min]="0"
|
|
39
|
+
currency="BRL">
|
|
40
|
+
</p-inputNumber>
|
|
41
|
+
|
|
42
|
+
<!-- mask -->
|
|
43
|
+
<p-inputMask id={{item.id}} *ngIf="item.type === 'mask'" [ngClass]="{
|
|
44
|
+
'ng-invalid ng-dirty':
|
|
45
|
+
validateForm && control.controls[item.formControl].errors
|
|
46
|
+
}" formControlName={{item.formControl}} placeholder={{item.placeholder}} styleClass="w-full"
|
|
47
|
+
(onComplete)="onChange(item.onChange)" mask={{item.mask}} unmask={{item.unmask}}
|
|
48
|
+
(onClear)="clickCLear(item.onCLear)" showClear="true"></p-inputMask>
|
|
49
|
+
|
|
50
|
+
<!-- treeSelect -->
|
|
51
|
+
<p-treeSelect id={{item.id}} [ngClass]="{
|
|
52
|
+
'ng-invalid ng-dirty':
|
|
53
|
+
validateForm && control.controls[item.formControl].errors
|
|
54
|
+
}" placeholder={{item.placeholder}} (onNodeSelect)="onChange(item.onChange)"
|
|
55
|
+
*ngIf="item.type === 'tree-select'" containerStyleClass="w-full p-0"
|
|
56
|
+
formControlName={{item.formControl}} [options]="item.treeSelectOptions" [filter]="true"
|
|
57
|
+
[filterInputAutoFocus]="true" emptyMessage="Nenhum dado encontrado" [showClear]="true"
|
|
58
|
+
(onClear)="clickCLear(item.onCLear)"></p-treeSelect>
|
|
59
|
+
|
|
60
|
+
<!-- autoComplete -->
|
|
61
|
+
<p-autoComplete inputId={{item.id}} [ngClass]="{
|
|
62
|
+
'ng-invalid ng-dirty':
|
|
63
|
+
validateForm && control.controls[item.formControl].errors
|
|
64
|
+
}" placeholder={{item.placeholder}} styleClass="w-full p-0" [inputStyle]="{'width':'100%'}"
|
|
65
|
+
*ngIf="item.type === 'autocomplete'" (onSelect)=" onChange(item.onChange)"
|
|
66
|
+
formControlName={{item.formControl}} [suggestions]="filteredAutoComplete"
|
|
67
|
+
(completeMethod)="filterAutoComplete($event, item.options)" [forceSelection]="false"
|
|
68
|
+
[showEmptyMessage]="true" emptyMessage="Nenhum dado encontrado" dataKey="code"
|
|
69
|
+
field="description" showClear=true (onClear)="clickCLear(item.onCLear)"></p-autoComplete>
|
|
70
|
+
|
|
71
|
+
<!-- date -->
|
|
72
|
+
<p-calendar id={{item.id}} view="{{item.viewDate}}" *ngIf="item.type === 'date'" [ngClass]="{
|
|
73
|
+
'ng-invalid ng-dirty':
|
|
74
|
+
validateForm && control.controls[item.formControl].errors
|
|
75
|
+
}" formControlName={{item.formControl}} styleClass="w-full"
|
|
76
|
+
[numberOfMonths]=numberOfMonthsDate(item.numberOfMonthsDate)
|
|
77
|
+
[selectionMode]=selectionMode(item.selectionMode) (onFocus)="onChange(item.onFocusDate)"
|
|
78
|
+
[maxDate]="item.maxDate" [minDate]="item.minDate" dateFormat="{{item.dateFormat}}"
|
|
79
|
+
(onSelect)="onChange(item.onChange)" [iconDisplay]="'input'" placeholder={{item.placeholder}}
|
|
80
|
+
[showIcon]="true" [showTime]="item.showTime" [timeOnly]="item.timeOnly"></p-calendar>
|
|
81
|
+
|
|
82
|
+
<!-- textarea -->
|
|
83
|
+
<div *ngIf="item.type === 'text-area'" class="text-right">
|
|
84
|
+
<textarea id={{item.id}} [ngClass]="{
|
|
85
|
+
'ng-invalid ng-dirty':
|
|
86
|
+
validateForm && control.controls[item.formControl].errors
|
|
87
|
+
}" placeholder={{item.placeholder}} class="w-full" maxlength="{{item.maxlength}}"
|
|
88
|
+
counterTemplate="{1} of 50, {0} remaining" counter="display"
|
|
89
|
+
(attr.change)="onChange(item.onChange)" pInputTextarea formControlName={{item.formControl}}
|
|
90
|
+
rows={{item.rowsTextArea}}></textarea>
|
|
91
|
+
<small *ngIf="item.maxlength" id="username-help">
|
|
92
|
+
{{control.controls[item.formControl].value.length}}/{{item.maxlength}}
|
|
93
|
+
</small>
|
|
94
|
+
</div>
|
|
95
|
+
|
|
96
|
+
<!-- checkbox -->
|
|
97
|
+
<div *ngIf="item.type == 'check-box'">
|
|
98
|
+
<p-checkbox id={{item.id}} [ngClass]="{
|
|
99
|
+
'ng-invalid ng-dirty':
|
|
100
|
+
validateForm && control.controls[item.formControl].errors
|
|
101
|
+
}" (onChange)="onChange(item.onChange)" binary="true" formControlName={{item.formControl}}
|
|
102
|
+
value={{item.formControl}} label={{item.label}}></p-checkbox>
|
|
103
|
+
</div>
|
|
104
|
+
|
|
105
|
+
<!-- checkbox multiple -->
|
|
106
|
+
<div id={{item.id}} *ngIf="item.type === 'check-box-multi'" class="flex gap-3">
|
|
107
|
+
<div formArrayName="{{item.formControl}}" *ngFor="let list of item.options; let i = index"
|
|
108
|
+
class="flex align-items-center gap-2">
|
|
109
|
+
<div [formGroupName]="i">
|
|
110
|
+
<p-checkbox id={{item.id}} [ngClass]="{
|
|
111
|
+
'ng-invalid ng-dirty':
|
|
112
|
+
validateForm && control.controls[item.formControl].errors
|
|
113
|
+
}" (onChange)="onChange(item.onChange)" binary="true" formControlName="{{list.code}}"
|
|
114
|
+
label={{list.description}}></p-checkbox>
|
|
115
|
+
</div>
|
|
116
|
+
</div>
|
|
117
|
+
|
|
118
|
+
</div>
|
|
119
|
+
|
|
120
|
+
<!-- button -->
|
|
121
|
+
<p-button id={{item.id}} *ngIf="item.type == 'button'" styleClass='{{item.buttonClass}} w-full mt-3'
|
|
122
|
+
(click)="item.onCLick()" [disabled]=item.disabled icon={{item.iconButton}}
|
|
123
|
+
label={{item.label}}></p-button>
|
|
124
|
+
|
|
125
|
+
<!-- can -->
|
|
126
|
+
<div id={{item.id}} class="area" *ngIf="item.type == 'can'">
|
|
127
|
+
<video autoplay="true" id="webCamera">
|
|
128
|
+
</video>
|
|
129
|
+
|
|
130
|
+
<input type="text" id="base_img" name="base_img">
|
|
131
|
+
<button type="button" onclick="takeSnapShot()">Tirar foto e salvar</button>
|
|
132
|
+
|
|
133
|
+
<img id="imagemConvertida">
|
|
134
|
+
<p id="caminhoImagem" class="caminho-imagem"><a href="" target="_blank" rel="noopener"></a></p>
|
|
135
|
+
<script src="script.js"></script>
|
|
136
|
+
</div>
|
|
137
|
+
|
|
138
|
+
<!-- upload files -->
|
|
139
|
+
<div id={{item.id}} *ngIf="item.type === 'upload-files' && !item.disabled " class="drag-image"
|
|
140
|
+
[style.border]="validateForm && control.controls[item.formControl].errors ? ' 1px dashed #f18282' : ' 1px dashed #d1d5db'">
|
|
141
|
+
<i *ngIf="filesView.length === 0" class="pi pi-cloud-upload"></i>
|
|
142
|
+
<p *ngIf="filesView.length === 0">Clique ou arraste e solte um arquivo para anexar</p>
|
|
143
|
+
<span *ngIf="filesView.length === 0">{{item.msgAcceptFiles}}</span>
|
|
144
|
+
<input id="fileInput" type="file" [multiple]=item.multileFile [accept]="item.acceptFiles"
|
|
145
|
+
(change)="onSelectFile(item.formControl, $event, item.multileFile)" />
|
|
146
|
+
<div *ngFor="let f of filesView">
|
|
147
|
+
<div *ngIf="f.type && f.type.includes('image')">
|
|
148
|
+
<label class="preview-img">
|
|
149
|
+
<img *ngIf="!f.content" src='{{getUrl(f)}}'>
|
|
150
|
+
<img *ngIf="f.content" src='{{f.content}}'>
|
|
151
|
+
<span *ngIf="item.viewNameFile">{{ f.name }}</span>
|
|
152
|
+
<input type="file" [multiple]=item.multileFile [accept]="item.acceptFiles"
|
|
153
|
+
(change)="onSelectFile(item.formControl, $event,item.multileFile)" />
|
|
154
|
+
<label> <i class="pi pi-times remove-file absolute"
|
|
155
|
+
(click)="onRemove(item.formControl, f)"></i></label>
|
|
156
|
+
</label>
|
|
157
|
+
</div>
|
|
158
|
+
<div *ngIf="f.type && !f.type.includes('image')">
|
|
159
|
+
<label class="preview-img h-0 max-w-0 mh-75 m-0">
|
|
160
|
+
<label class="mr-3">{{ f.name }}</label>
|
|
161
|
+
<input type="file" [multiple]=item.multileFile [accept]="item.acceptFiles"
|
|
162
|
+
(change)="onSelectFile(item.formControl, $event,item.multileFile)" />
|
|
163
|
+
<label> <i class="pi pi-times remove-file absolute"
|
|
164
|
+
(click)="onRemove(f)"></i></label>
|
|
165
|
+
|
|
166
|
+
</label>
|
|
167
|
+
</div>
|
|
168
|
+
</div>
|
|
169
|
+
</div>
|
|
170
|
+
|
|
171
|
+
<!-- upload files disabled -->
|
|
172
|
+
<!-- <p-fileUpload mode="basic" formControlName="{{item.formControl}}" chooseLabel="Choose"
|
|
173
|
+
chooseIcon="pi pi-upload" accept="image/*" maxFileSize="1000000" /> -->
|
|
174
|
+
|
|
175
|
+
<div id={{item.id}} *ngIf="item.type === 'upload-files' && item.disabled ">
|
|
176
|
+
<p-button (click)="op.toggle($event)" icon="pi pi-paperclip"
|
|
177
|
+
label="Arquivos anexados"></p-button>
|
|
178
|
+
|
|
179
|
+
<p-overlayPanel #op [style]="{'width': '450px'}" [showCloseIcon]="true">
|
|
180
|
+
<ng-template pTemplate="content">
|
|
181
|
+
<p-table *ngIf="files.length > 0" [value]="files" selectionMode="single"
|
|
182
|
+
[(selection)]="selectedProduct" (onRowSelect)="onRowSelect($event, op)"
|
|
183
|
+
responsiveLayout="scroll">
|
|
184
|
+
<ng-template pTemplate="header">
|
|
185
|
+
<tr>
|
|
186
|
+
<th pSortableColumn="name">Nome<p-sortIcon field="name"></p-sortIcon></th>
|
|
187
|
+
<th></th>
|
|
188
|
+
</tr>
|
|
189
|
+
</ng-template>
|
|
190
|
+
<ng-template pTemplate="body" let-rowData let-file>
|
|
191
|
+
<tr>
|
|
192
|
+
<td *ngIf="item.viewNameFile">{{file.name}}</td>
|
|
193
|
+
<td> <p-button *ngIf="item.onCLick" icon="pi pi-download"
|
|
194
|
+
(click)='item.onCLick(file)'></p-button>
|
|
195
|
+
</td>
|
|
196
|
+
</tr>
|
|
197
|
+
</ng-template>
|
|
198
|
+
</p-table>
|
|
199
|
+
<div *ngIf="files.length === 0" class="p-10">
|
|
200
|
+
<label>Nenhum arquivo anexado</label>
|
|
201
|
+
</div>
|
|
202
|
+
</ng-template>
|
|
203
|
+
</p-overlayPanel>
|
|
204
|
+
</div>
|
|
205
|
+
|
|
206
|
+
<!-- list -->
|
|
207
|
+
<ul id={{item.id}} *ngIf="item.type === 'list' && item.options">
|
|
208
|
+
<li *ngFor="let list of item.options">{{list.description}}</li>
|
|
209
|
+
</ul>
|
|
210
|
+
|
|
211
|
+
<!-- multi -->
|
|
212
|
+
<p-multiSelect id={{item.id}} [ngClass]="{
|
|
213
|
+
'ng-invalid ng-dirty':
|
|
214
|
+
validateForm && control.controls[item.formControl].errors
|
|
215
|
+
}" placeholder={{item.placeholder}} *ngIf="item.type === 'multi'" [options]="item.options"
|
|
216
|
+
formControlName={{item.formControl}} styleClass="p-0 w-full" optionLabel="description"
|
|
217
|
+
(onChange)="onChange(item.onChange)" maxSelectedLabels="100"></p-multiSelect>
|
|
218
|
+
|
|
219
|
+
<!-- radioButton -->
|
|
220
|
+
<div id={{item.id}} *ngIf="item.type === 'radio-button'" class="flex gap-3">
|
|
221
|
+
<div *ngFor="let listRadioButton of item.options" class="flex align-items-center gap-2">
|
|
222
|
+
<p-radioButton [ngClass]="{
|
|
223
|
+
'ng-invalid ng-dirty':
|
|
224
|
+
validateForm && control.controls[item.formControl].errors
|
|
225
|
+
}" [value]="listRadioButton.code" formControlName={{item.formControl}}
|
|
226
|
+
(onClick)="onChange(item.onChange)"></p-radioButton>
|
|
227
|
+
<label>{{listRadioButton.description}}</label>
|
|
228
|
+
</div>
|
|
229
|
+
@if(control.controls[item.formControl].value == 'other'){
|
|
230
|
+
<input pInputText type="text" formControlName={{item.formControlOther}} />
|
|
231
|
+
}
|
|
232
|
+
</div>
|
|
233
|
+
|
|
234
|
+
<!-- selectButton -->
|
|
235
|
+
<div class="d-flex" *ngIf="item.type === 'select-button'">
|
|
236
|
+
<p-selectButton id={{item.id}} (onChange)="onChange(item.onChange)" [options]="item.options"
|
|
237
|
+
formControlName={{item.formControl}} optionValue="code">
|
|
238
|
+
<ng-template let-item>
|
|
239
|
+
<span>{{item.description}}</span>
|
|
240
|
+
</ng-template>
|
|
241
|
+
</p-selectButton>
|
|
242
|
+
<!-- <input type="text" pInputText [attr.disabled]="item.disabled"
|
|
243
|
+
formControlName={{item.formControlSecondary}}> -->
|
|
244
|
+
</div>
|
|
245
|
+
|
|
246
|
+
<!-- table -->
|
|
247
|
+
<p-table id={{item.id}} *ngIf="item.type === 'table'" [scrollable]="true"
|
|
248
|
+
scrollHeight={{item.scrollHeight}} [columns]=item.colsTable
|
|
249
|
+
styleClass="p-datatable-striped p-datatable-sm" [value]=item.rowsTable>
|
|
250
|
+
<ng-template pTemplate="header" let-columns>
|
|
251
|
+
<tr>
|
|
252
|
+
<th *ngFor="let col of columns">
|
|
253
|
+
<span *ngIf="col.filed !== 'action'">{{ col.header }}</span>
|
|
254
|
+
<span *ngIf="col.filed === 'action'">Ação</span>
|
|
255
|
+
</th>
|
|
256
|
+
|
|
257
|
+
</tr>
|
|
258
|
+
</ng-template>
|
|
259
|
+
<ng-template pTemplate="body" let-rowData let-columns="columns">
|
|
260
|
+
<tr>
|
|
261
|
+
<td *ngFor="let col of columns">
|
|
262
|
+
<div *ngIf="col.field !== 'button'">
|
|
263
|
+
{{ rowData[col.field] }}
|
|
264
|
+
</div>
|
|
265
|
+
<div *ngIf="col.field === 'action'">
|
|
266
|
+
<p-button *ngFor="let action of item.buttonsTable"
|
|
267
|
+
styleClass={{action.styleClass}} label={{action.label}}
|
|
268
|
+
(click)="action.onCLick(rowData)" icon={{action.icon}}></p-button>
|
|
269
|
+
</div>
|
|
270
|
+
</td>
|
|
271
|
+
</tr>
|
|
272
|
+
</ng-template>
|
|
273
|
+
<ng-template pTemplate="footer" let-columns>
|
|
274
|
+
<tr *ngFor="let footer of item.rowsFooter">
|
|
275
|
+
<td colspan=12><span class="font-normal">{{footer.text}}:</span> {{footer.value}}</td>
|
|
276
|
+
</tr>
|
|
277
|
+
</ng-template>
|
|
278
|
+
</p-table>
|
|
279
|
+
|
|
280
|
+
<!-- inputSwitch -->
|
|
281
|
+
<div class="d-flex" *ngIf="item.type === 'switch'">
|
|
282
|
+
<p-inputSwitch id={{item.id}} formControlName={{item.formControl}} class="mr-10"
|
|
283
|
+
(onChange)="onChange(item.onChange)"></p-inputSwitch>
|
|
284
|
+
<p translate={{item.label}}></p>
|
|
285
|
+
</div>
|
|
286
|
+
|
|
287
|
+
<!-- password -->
|
|
288
|
+
<p-password id={{item.id}} [ngClass]="{
|
|
289
|
+
'ng-invalid ng-dirty':
|
|
290
|
+
validateForm && control.controls[item.formControl].errors
|
|
291
|
+
}" placeholder={{item.placeholder}} *ngIf="item.type === 'password'" [feedback]="false"
|
|
292
|
+
formControlName={{item.formControl}} (onChange)="onChange(item.onChange)" styleClass="w-full"
|
|
293
|
+
[toggleMask]="true"></p-password>
|
|
294
|
+
|
|
295
|
+
<!-- photo -->
|
|
296
|
+
<div id={{item.id}} class="camera" *ngIf="item.type === 'photo'">
|
|
297
|
+
<video id="video" class="foto" autoplay>Vídeo não disponível.</video>
|
|
298
|
+
<canvas id="canvas" class="foto" style="display: none;"></canvas>
|
|
299
|
+
<button pButton icon="pi pi-times" class="remove-file" id="icon-remove" [rounded]="true"
|
|
300
|
+
style="visibility: collapse;" (click)="removePhoto()"></button>
|
|
301
|
+
<button pButton icon="pi pi-camera" [rounded]="true" (click)="capturePhoto(item.formControl)"
|
|
302
|
+
id="button"></button>
|
|
303
|
+
</div>
|
|
304
|
+
|
|
305
|
+
<!-- likert -->
|
|
306
|
+
<p-table id={{item.id}} *ngIf="item.type === 'likert'" [scrollable]="true"
|
|
307
|
+
scrollHeight={{item.scrollHeight}} [columns]=item.colsTable
|
|
308
|
+
styleClass="p-datatable-striped p-datatable-sm" [value]=item.rowsTable>
|
|
309
|
+
<ng-template pTemplate="header" let-columns>
|
|
310
|
+
<tr>
|
|
311
|
+
<th style="width: 4rem"></th>
|
|
312
|
+
<th *ngFor="let col of columns">
|
|
313
|
+
<span>{{ col.header }}</span>
|
|
314
|
+
</th>
|
|
315
|
+
</tr>
|
|
316
|
+
</ng-template>
|
|
317
|
+
<ng-template pTemplate="body" let-row let-rowIndex="rowIndex" let-columns="columns"
|
|
318
|
+
formArrayName="{{item.formControl}}">
|
|
319
|
+
<tr>
|
|
320
|
+
<td>
|
|
321
|
+
{{row}}
|
|
322
|
+
</td>
|
|
323
|
+
@for (control of columns; track item; let index = $index) {
|
|
324
|
+
<td [formGroupName]="rowIndex">
|
|
325
|
+
<p-radioButton value="{{columns[index].field}}+{{row}}"
|
|
326
|
+
formControlName="question{{rowIndex}}" />
|
|
327
|
+
</td>
|
|
328
|
+
}
|
|
329
|
+
</tr>
|
|
330
|
+
</ng-template>
|
|
331
|
+
</p-table>
|
|
332
|
+
|
|
333
|
+
<!-- editable table -->
|
|
334
|
+
<p-table
|
|
335
|
+
id="{{ item.id }}"
|
|
336
|
+
*ngIf="item.type === 'editable-table'"
|
|
337
|
+
[scrollable]="true"
|
|
338
|
+
scrollHeight="{{ item.scrollHeight }}"
|
|
339
|
+
[columns]="item.colsTable"
|
|
340
|
+
styleClass="p-datatable-striped p-datatable-sm"
|
|
341
|
+
[value]="item.rowsTable"
|
|
342
|
+
editMode="cell">
|
|
343
|
+
|
|
344
|
+
<!-- Cabeçalho da tabela -->
|
|
345
|
+
<ng-template pTemplate="header" let-columns>
|
|
346
|
+
<tr>
|
|
347
|
+
<th></th>
|
|
348
|
+
<th *ngFor="let col of columns">
|
|
349
|
+
<span>{{ col.header }}</span>
|
|
350
|
+
</th>
|
|
351
|
+
</tr>
|
|
352
|
+
</ng-template>
|
|
353
|
+
|
|
354
|
+
<!-- Corpo da tabela -->
|
|
355
|
+
<ng-template pTemplate="body" let-row let-rowIndex="rowIndex" let-columns="columns"
|
|
356
|
+
formArrayName="{{ item.formControl }}" let-editing="editing">
|
|
357
|
+
<tr>
|
|
358
|
+
<td>{{ row }}</td>
|
|
359
|
+
@for (control of columns; track item; let index = $index) {
|
|
360
|
+
<td [formGroupName]="rowIndex" [pEditableColumn]="row" pEditableColumnField="row">
|
|
361
|
+
<p-cellEditor>
|
|
362
|
+
<ng-template pTemplate="input">
|
|
363
|
+
<input class="w-full" pInputText type="text" formControlName="_{{control.field}}question{{ rowIndex }}" />
|
|
364
|
+
</ng-template>
|
|
365
|
+
<ng-template pTemplate="output">
|
|
366
|
+
<input class="w-full" pInputText type="text" formControlName="_{{control.field}}question{{ rowIndex }}" />
|
|
367
|
+
</ng-template>
|
|
368
|
+
</p-cellEditor>
|
|
369
|
+
</td>
|
|
370
|
+
}
|
|
371
|
+
</tr>
|
|
372
|
+
</ng-template>
|
|
373
|
+
</p-table>
|
|
374
|
+
|
|
375
|
+
|
|
376
|
+
<!-- validação de item -->
|
|
377
|
+
<div>
|
|
378
|
+
<small class="danger-text"
|
|
379
|
+
*ngIf="validateForm && control.controls[item.formControl] && control.controls[item.formControl].errors?.['required']">
|
|
380
|
+
Campo obrigatório
|
|
381
|
+
</small>
|
|
382
|
+
<small class="danger-text"
|
|
383
|
+
*ngIf="validateForm && control.controls[item.formControl] && control.controls[item.formControl].errors?.['email']">
|
|
384
|
+
Email inválido
|
|
385
|
+
</small>
|
|
386
|
+
</div>
|
|
387
|
+
|
|
388
|
+
</div>
|
|
389
|
+
</div>
|
|
390
|
+
|
|
391
|
+
<p-divider
|
|
392
|
+
*ngIf="(buttonsStandard && buttonsStandard.length > 0) || (buttonsOptional && buttonsOptional.length > 0)"></p-divider>
|
|
393
|
+
|
|
394
|
+
<div class="buttons-form">
|
|
395
|
+
<div *ngFor="let button of buttonsStandard">
|
|
396
|
+
<p-button *ngIf="button.type === 'clean'" styleClass="p-button-warning {{button.styleClass}}"
|
|
397
|
+
label="Limpar" (click)="button.onCLick()" icon="pi pi-times"></p-button>
|
|
398
|
+
<p-button *ngIf="button.type === 'filter'" styleClass="{{button.styleClass}}" label="Filtrar"
|
|
399
|
+
(click)="button.onCLick()" icon="pi pi-search"></p-button>
|
|
400
|
+
<p-button *ngIf="button.type === 'save'" styleClass="p-button-success {{button.styleClass}}"
|
|
401
|
+
label="Salvar" (click)="button.onCLick()" icon="pi pi-save"></p-button>
|
|
402
|
+
<p-button *ngIf="button.type === 'cancel'" styleClass="p-button-danger {{button.styleClass}}"
|
|
403
|
+
label="Cancelar" (click)="button.onCLick()" icon="pi pi-times"></p-button>
|
|
404
|
+
</div>
|
|
405
|
+
<div *ngFor="let button of buttonsOptional">
|
|
406
|
+
<p-button styleClass={{button.styleClass}} label={{button.label}} (click)=" button.onCLick()"
|
|
407
|
+
icon={{button.icon}}></p-button>
|
|
408
|
+
</div>
|
|
409
|
+
</div>
|
|
410
|
+
</div>
|
|
411
|
+
</form>
|
|
412
|
+
</div>
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
|
2
|
+
|
|
3
|
+
import { FormDynamicAngularComponent } from './form-dynamic-angular.component';
|
|
4
|
+
|
|
5
|
+
describe('FormDynamicAngularComponent', () => {
|
|
6
|
+
let component: FormDynamicAngularComponent;
|
|
7
|
+
let fixture: ComponentFixture<FormDynamicAngularComponent>;
|
|
8
|
+
|
|
9
|
+
beforeEach(async () => {
|
|
10
|
+
await TestBed.configureTestingModule({
|
|
11
|
+
declarations: [ FormDynamicAngularComponent ]
|
|
12
|
+
})
|
|
13
|
+
.compileComponents();
|
|
14
|
+
|
|
15
|
+
fixture = TestBed.createComponent(FormDynamicAngularComponent);
|
|
16
|
+
component = fixture.componentInstance;
|
|
17
|
+
fixture.detectChanges();
|
|
18
|
+
});
|
|
19
|
+
|
|
20
|
+
it('should create', () => {
|
|
21
|
+
expect(component).toBeTruthy();
|
|
22
|
+
});
|
|
23
|
+
});
|