Feat:New changes

src/app/pages/veriable-form/veriable-form.component.html

@@ -2,43 +2,46 @@
   <div class="row">
     <div class="col-md-12">
       <div class="variableCal">
-          <form [formGroup]="formGroup">
+        <form [formGroup]="form" (ngSubmit)="onSubmit()">
-
+          <div formArrayName="rows">
-            <div class="form-group" formArrayName="items" *ngFor="let item of items.controls; let i = index">
+            <div *ngFor="let row of rows.controls; let rowIndex = index" [formGroupName]="rowIndex">
-              <div class="row" [formGroupName]="i">
+              <div formArrayName="columns" class="add-col-section">
-                <div class="col-md-3">
+                <div *ngFor="let column of getColumns(row).controls; let colIndex = index" [formGroupName]="colIndex">
-                  <select formControlName="type" (change)="onTypeChange(i)" class="form-control">
-                    <option value="" selected disabled > Select </option>
-                    <option value="variable">Variable</option>
-                    <option value="text">Text</option>
-                  </select>
-                </div>
-
-                <div class="col-md-3" *ngIf="item.get('type')?.value === 'variable'">
-                  <select formControlName="variable" class="form-control">
-                    <option value="" selected disabled > Select </option>
-                    <option *ngFor="let v of variableList" [value]="v">{{ v }}</option>
-                  </select>
-                  <div>
-                    <p>Variable Calculation: {{ calculateVariable(i) }}</p>
-                  </div>
-                </div>
-
-                <div *ngIf="item.get('type')?.value === 'text'" class="col-md-3">
-                  <input formControlName="text" placeholder="Enter text here" class="form-control" />
-                </div>
-                <div class="col-md-3">
-                  <button class="btn btn-danger" (click)="removeRow(i)" *ngIf="items.length > 1">Remove Row</button>
-                  <button class="btn btn-primary ml-2" (click)="addRow()" *ngIf="i === items.length - 1">Add Row</button>
-                </div>
-              </div>
-            </div>
                   <div class="row">
-                <div class="col-md-12">
+                    <div class="col-md-2">
-                  <button type="submit" class="btn btn-primary" (click)="onSubmit()" >Submit</button>
+                      <div class="form-group">
+                      <select formControlName="type" class="form-control" >
+                        <option value="text">Text</option>
+                        <option value="variable">Variable</option>
+                      </select>
+                    </div>
+                    </div>
+                    <div class="col-md-2" *ngIf="isText(row, colIndex)">
+                      <div class="form-group" >
+                        <input type="text" formControlName="textValue" placeholder="Enter text" class="form-control" >
+                      </div>
+                    </div>
+                    <div class="col-md-2" *ngIf="isVariable(row, colIndex)">
+                      <div class="form-group" >
+                        <select formControlName="variableValue" class="form-control" >
+                          <option *ngFor="let variable of variableList" [value]="variable">{{ variable }}</option>
+                        </select>
+                      </div>
+                    </div>
+                  </div>
                 </div>
               </div>
 
+              <!-- Button to add a new column in the same row -->
+              <button type="button" class="mb-4" (click)="addColumn(rowIndex)">Add Column</button>
+
+            </div>
+          </div>
+
+          <!-- Button to add a new row -->
+          <button type="button" (click)="addRow()">Add Row</button>
+
+          <button type="submit">Submit</button>
         </form>
       </div>
     </div>

src/app/pages/veriable-form/veriable-form.component.sass

@@ -0,0 +1,71 @@
+// General form styles
+form
+  max-width: 100%
+  margin: 20px auto
+  padding: 20px
+  border: 1px solid #ddd
+  border-radius: 5px
+  background-color: #f9f9f9
+
+  .form-row
+    display: flex
+    flex-direction: column
+    margin-bottom: 20px
+    padding: 10px
+    border: 1px solid #ccc
+    border-radius: 5px
+    background-color: #fff
+
+    .form-column
+      display: flex
+      align-items: center
+      margin-bottom: 10px
+
+      > *
+        margin-right: 10px
+
+      select, input
+        padding: 8px
+        border-radius: 3px
+        border: 1px solid #ccc
+        width: 150px
+
+    .row-buttons
+      margin-top: 10px
+
+    .column-buttons
+      margin-left: auto // Push button to the right
+
+  // Button styles
+  button
+    padding: 10px 15px
+    border: none
+    background-color: #007bff
+    color: white
+    border-radius: 5px
+    cursor: pointer
+    margin-right: 10px
+
+    &:hover
+      background-color: #0056b3
+
+    &[type="submit"]
+      margin-top: 20px
+      background-color: #28a745
+
+      &:hover
+        background-color: #218838
+
+// Media queries for responsiveness
+@media (max-width: 768px)
+  .form-row
+    flex-direction: column
+
+  .form-column
+    flex-direction: column
+    align-items: flex-start
+
+    > *
+      margin-bottom: 10px
+      width: 100%
+

src/app/pages/veriable-form/veriable-form.component.ts

@@ -7,57 +7,61 @@ import { FormArray, FormBuilder, FormGroup } from '@angular/forms';
   styleUrls: ['./veriable-form.component.sass']
 })
 export class VeriableFormComponent implements OnInit {
-  formGroup: FormGroup;
+  form: FormGroup;
-  variableList = ['Variable1', 'Variable2', 'Variable3'];  // Example variable list
+
+  // Sample variable list for dropdown
+  variableList = ['Variable 1', 'Variable 2', 'Variable 3'];
 
   constructor(private fb: FormBuilder) {
-    this.formGroup = this.fb.group({
+    this.form = this.fb.group({
-      items: this.fb.array([this.createItem()])
+      rows: this.fb.array([]) // Form array for multiple rows
     });
   }
 
   ngOnInit(): void {
-
+    // Initialize with one row
+    this.addRow();
   }
 
-  get items() {
+  get rows(): FormArray {
-    return this.formGroup.get('items') as FormArray;
+    return this.form.get('rows') as FormArray;
   }
 
-  createItem(): FormGroup {
+  getColumns(row: any): FormArray {
+    return row.get('columns') as FormArray;
+  }
+
+  isText(row: any, colIndex: number): boolean {
+    const columns = this.getColumns(row);
+    return columns.at(colIndex).get('type')?.value === 'text';
+  }
+
+  isVariable(row: any, colIndex: number): boolean {
+    const columns = this.getColumns(row);
+    return columns.at(colIndex).get('type')?.value === 'variable';
+  }
+
+  createColumn(): FormGroup {
     return this.fb.group({
-      type: [''],
+      type: [''], // Type can be 'text' or 'variable'
-      variable: [''],
+      textValue: [''], // For text input
-      text: ['']
+      variableValue: [''] // For variable select
     });
   }
 
-  addRow() {
+  addColumn(rowIndex: number): void {
-    this.items.push(this.createItem());
+    const row = this.rows.at(rowIndex).get('columns') as FormArray;
+    row.push(this.createColumn());
   }
 
-  removeRow(index: number) {
+  addRow(): void {
-    this.items.removeAt(index);
+    const row = this.fb.group({
+      columns: this.fb.array([this.createColumn()]) // Initialize with one column
+    });
+    this.rows.push(row);
   }
 
-  onTypeChange(index: number) {
+  onSubmit(): void {
-    const type = this.items?.at(index)?.get('type')?.value;
+    console.log(this.form.value);
-    if (type === 'variable') {
-      this.items?.at(index)?.get('text')?.setValue('');
-    } else {
-      this.items?.at(index)?.get('variable')?.setValue('');
   }
 }
-
-  calculateVariable(index: number): string {
-    const selectedVariable = this.items?.at(index)?.get('variable')?.value;
-    return `Calculated value for ${selectedVariable}`;
-  }
-
-  onSubmit() {
-      const formData = this.formGroup.value;
-      console.log(formData);
-
-  }
-
-}