Right float button with *ngfor in Angular

2
votes

I have created a form with Reactive Forms in Angular.

Actually I have this display:

<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>

actual form

I would like my button to be aligned right to the last minus button.

I have added a class in ngfor div:

<div formArrayName="GroupId_Name" class="formcontainer"  *ngFor="let control of GroupRMPM_FG.controls.GroupId_Name.controls; let i= index">

here's the CSS

.formcontainer  {
    display: inline-block;
}

But still not having what I want:

form try

How can I get the "+" icon at the right of the last minus button ?

3
htmlcssangular
are you trying to have "plus" button for each input? If so, then place the html for plus button inside the ngFor loop - Sahin Erbay

3 Answers

1
votes

you should put a condition in your button and display it if reach the length of the array

<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>
        <button pButton type="button" (click)="addNewGroup()" icon="fa-plus" class="add-btn" *ngIf="i===GroupRMPM_FG.controls.GroupId_Name.controls.length-1"></button>
       </div>       
    </form>
 </div>
1
votes

Hey I think your approach is nearly right, but you will have to wrap your loop-container... furthermore flexbox should solve the aligning (also there are other approaches on how to do this):

 <form [formGroup]="GroupRMPM_FG" style="display: flex; flex-direction: row; justify-content: flex-end">
    <div style="display: inline-block">   
       <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>
    <button pButton type="button" (click)="addNewGroup()" icon="fa-plus" class="add-btn"></button>
 </form>
0
votes

Answer modeled on bootstrap pull-right class :

HTML

<button pButton type="button" (click)="addNewGroup()" icon="fa-plus" class="add-btn pull-right"></button>

CSS

.pull-right{
  float:right
}

Here is a JsFiddle I experimented with https://jsfiddle.net/cwpuj0qz/1/