Repeater creates an interface to add and remove a repeatable group of input elements. It uses the first "data-repeater-item" as a template for added items. It rewrites your name attributes to avoid collisions within the same form. (since the name attributes will be repeated). the name attributes would be renamed group-a[0][text-input] and group-a[1][text-input].
Checkbox inputs and Multiple Select inputs will have an additional [] appended. So for example a checkbox with name foo would be mapped to group-a[0][foo][].
Names get reindexed if an item is added or deleted.
1. The component will bind to any existing DOM element.
<form [formGroup]="repeatForm">
<div class="card-body" formArrayName="repeatArray">
<div class="row">
<div class="col-12" *ngFor="let repeatForm of repeatFormGroup.controls; let i = index;">
<div class="repeater-default">
<div [formGroupName]="i" class="row">
<div class="form-group mb-1 col-sm-12 col-md-2">
<label for="email-addr">Email address</label>
<br>
<input type="email" formControlName="email" class="form-control" id="email-addr"
placeholder="Enter email">
</div>
<div class="form-group mb-1 col-sm-12 col-md-2">
<label for="pass">Password</label>
<br>
<input type="password" formControlName="password" class="form-control" id="pass"
placeholder="Password">
</div>
<div class="form-group mb-1 col-sm-12 col-md-2">
<label for="bio" class="cursor-pointer">Bio</label>
<br>
<textarea class="form-control" formControlName="bio" id="bio" rows="2"></textarea>
</div>
<div class="skin skin-flat form-group mb-1 col-sm-12 col-md-2">
<label for="tel-input">phone</label>
<br>
<input class="form-control" formControlName="phone" type="tel" value="1-(555)-555-5555"
id="tel-input">
</div>
<div class="form-group mb-1 col-sm-12 col-md-2">
<label for="profession">Profession</label>
<br>
<select class="form-control" id="profession" formControlName="profession">
<option *ngFor="let prof of professions" [value]="prof">{{prof}}</option>
</select>
</div>
<div class="form-group col-sm-12 col-md-2 text-center mt-2">
<button type="button" class="btn btn-danger" (click)="removeRepeat(i)"><i
class="ft-x"></i>
Delete</button>
</div>
</div>
</div>
</div>
</div>
<hr>
</div>
</form>
Refer following links for detailed documentation, configuration options, methods and examples:
| Type | URL |
|---|---|
| Plugin Link | https://github.com/DubFriend/jquery.repeater |
| Template Page | https://modernadmin.evolvision.com/form-repeater |