I've successfully implemented a form using Reactive Forms in Angular.
Currently, my form is displayed as follows:
<div class="center" appMcard>
<form [formGroup]="GroupRMPM_FG">
<div formArrayName="GroupId_Name" *ngFor="let control of GroupRMPM_FG.controls.GroupId_Name.controls; let i= index">
<input type="text" pInputText [formControl]="control.controls.Group_Id_Name"/>
<button pButton type="button" class="delete-btn " *ngIf="GroupRMPM_FG.controls.GroupId_Name.controls.length > 1" (click)="deleteGroup(i)" icon="fa-minus" >
</button>
</div>
<button pButton type="button" (click)="addNewGroup()" icon="fa-plus" class="add-btn"></button>
</form>
</div>
https://i.stack.imgur.com/yCGpv.png
I want the "+" button to be aligned to the right of the last minus button.
To achieve this, I added a class to the ngfor div:
<div formArrayName="GroupId_Name" class="formcontainer" *ngFor="let control of GroupRMPM_FG.controls.GroupId_Name.controls; let i=index">
Below is the CSS code for the new class:
.formcontainer {
display: inline-block;
}
Despite adding the class, I'm still unable to position the "+" icon next to the last minus button.
https://i.stack.imgur.com/IMsLn.png
How can I ensure that the "+" icon appears to the right of the last minus button?