43 lines
1.5 KiB
HTML
43 lines
1.5 KiB
HTML
<form [formGroup]="form" *transloco="let t">
|
|
<div formArrayName="items">
|
|
<!-- We are tracking items, as the index will not always point towards the same item. -->
|
|
@for(item of ItemsArray.controls; let i = $index; track item; let last = $last) {
|
|
<div class="row g-0 mb-3">
|
|
<div class="col-lg-10 col-md-12 pe-2">
|
|
<div class="mb-3">
|
|
<label for="item--{{i}}" class="visually-hidden">{{label}}</label>
|
|
<input
|
|
type="text"
|
|
class="form-control"
|
|
[formControlName]="i"
|
|
id="item--{{i}}"
|
|
>
|
|
@if (item.dirty && item.touched && errorMessage) {
|
|
@if (item.status === "INVALID") {
|
|
<div id="item--{{i}}-error" class="invalid-feedback" style="display: inline-block">
|
|
{{errorMessage}}
|
|
</div>
|
|
}
|
|
}
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-2">
|
|
<button
|
|
class="btn btn-danger me-2"
|
|
(click)="remove(i)"
|
|
[disabled]="ItemsArray.length === 1"
|
|
>
|
|
<i class="fa-solid fa-trash" aria-hidden="true"></i>
|
|
<span class="visually-hidden">{{t('common.remove')}}</span>
|
|
</button>
|
|
@if (last){
|
|
<button class="btn btn-secondary " (click)="add()">
|
|
<i class="fa-solid fa-plus" aria-hidden="true"></i>
|
|
<span class="visually-hidden">{{t('common.add')}}</span>
|
|
</button>
|
|
}
|
|
</div>
|
|
</div>
|
|
}
|
|
</div>
|
|
</form>
|