core/dynamic-forms/array/array.type.component.ts
FieldArrayType
selector | c8y-array-type |
templateUrl | ./array.type.component.html |
Properties |
|
Methods |
add |
add()
|
Returns :
void
|
ngOnInit |
ngOnInit()
|
Returns :
void
|
remove | ||||||
remove(i: number)
|
||||||
Parameters :
Returns :
void
|
Static Readonly CONFIG |
Type : ConfigOption
|
Default value : {
types: [{ name: 'array', component: ArrayTypeComponent }]
}
|
<div role="group" [attr.aria-labelledby]="id + '-fieldset'">
<div id="{{ id + '-fieldset' }}" class="legend form-block" *ngIf="to.label || to.description">
{{ to.label | humanize }}
<button
*ngIf="to.description"
class="btn-clean text-14 m-l-4 m-t-auto m-b-auto"
[popover]="to.description"
placement="right"
[outsideClick]="true"
type="button"
>
<i c8yIcon="question-circle-o" class="text-primary"></i>
</button>
</div>
<div
class="form-control-feedback-message has-error"
role="alert"
*ngIf="showError && formControl.errors"
>
<formly-validation-message [field]="field"></formly-validation-message>
</div>
<div *ngFor="let ifield of field.fieldGroup; let i = index" class="input-group-array">
<formly-field [field]="ifield"></formly-field>
<div class="input-group-btn" [ngClass]="{ 'm-t-24': i === 0 }">
<button
type="button"
class="btn btn-clean m-l-auto"
title="{{ 'Delete' | translate }}"
[disabled]="to.disabled || field.fieldGroup.length === 1"
(click)="remove(i)"
>
<i c8yIcon="minus-circle" class="text-danger"></i>
</button>
</div>
</div>
<div class="p-t-8">
<button
type="button"
title="{{
(field.templateOptions?.addText | translate) || 'Add \{\{ label \}\}'
| translate: field?.fieldArray?.templateOptions
}}"
class="btn btn-default"
[disabled]="to.disabled"
(click)="add()"
[attr.data-cy]="field.templateOptions?.addTextDataCy || 'add-array-item'"
>
<i c8yIcon="plus-circle"></i>
<span
*ngIf="!field.templateOptions?.addText"
ngNonBindable
translate
[translateParams]="field?.fieldArray?.templateOptions"
>
Add {{ label }}
</span>
<span *ngIf="field.templateOptions?.addText">
{{ field.templateOptions?.addText | translate }}
</span>
</button>
</div>
</div>