This is my code that generates fields using a for loop. I'm expecting the email and phone number fields to be displayed side by side, but instead, they are stacked on top of each other. I believe this issue is due to the for loop. Is there a way to make the email and phone number fields appear side by side while keeping the other form fields vertical?
Here is my code.
<form *ngIf="dynamicForm" [formGroup]="dynamicForm" ><div *ngFor="let field of formData.fields"><ng-container [ngSwitch]="field.type"><div *ngSwitchCase="'text'" [ngClass] = "{'two-flex-items':false,'form-group':true}"><input [formControlName]="field.name" [id]="field.name" type="text" [placeholder]="field.placeholder" [required]="field.required"></div><div *ngSwitchCase="'email'"><div class="form-group"><div><input [formControlName]="field.name" [id]="field.name" type="email" [placeholder]="field.placeholder" [required]="field.required"></div></div></div><div *ngSwitchCase="'tel'"><div class="form-group"><div ><input [formControlName]="field.name" [id]="field.name" type="tel" [placeholder]="field.placeholder" [required]="field.required"></div></div></div><div *ngSwitchCase="'textarea'" [ngClass] = "{'two-flex-items':false,'form-group':true}"><input [formControlName]="field.name" [id]="field.name" type="textarea" [placeholder]="field.placeholder" [required]="field.required"></div><div *ngSwitchCase="'select'" [ngClass] = "{'two-flex-items':false,'form-group':true}"><select [formControlName]="field.name" [id]="field.name" [required]="field.required"><option value="" disabled selected>{{field.placeholder}}</option><option *ngFor="let option of field.options" [value]="option.value"> {{option.placeholder}}</option></select></div></ng-container><div *ngIf="dynamicForm.get(field.name).invalid && dynamicForm.get(field.name).touched"> {{field.name}} is required</div></div><button type="submit" (click)="onSubmit()" [disabled]="dynamicForm.invalid" [ngStyle]="{'background-color': formData.theme.primaryColor}"> Submit</button></form>This is the scss
.form-group{ width: 100%; input,textarea,select{ width: 100%; outline: none; border: 1px solid #e6e6e6; padding: 10px; font-size: 14px; border-radius: 4px;&::placeholder{ color: #cecdcd; }&:focus{ border:1px solid#afafaf; } } .error-msg{ color: red; margin-top: 3px; padding: 3px 10px; }}.form-container{ background-color: white; border-radius: 6px; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.068); margin: 20px; padding: 20px; padding-top: 40px; display: flex; flex-direction: column; gap: 20px;}.two-flex-items { display: flex; gap: 20px; /* Adjust the gap between inputs */ }