new changes

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

@@ -4,43 +4,35 @@
       <div class="variableCal">
         <form [formGroup]="form" (ngSubmit)="onSubmit()">
           <div formArrayName="rows">
-            <div *ngFor="let row of rows.controls; let rowIndex = index" [formGroupName]="rowIndex">
+            <div *ngFor="let row of rows.controls; let rowIndex = index" [formGroupName]="rowIndex" class="row-section">
               <div formArrayName="columns" class="add-col-section">
-                <div class="row d-flex" *ngFor="let column of getColumns(row).controls; let colIndex = index" [formGroupName]="colIndex">
+                <div class="" *ngFor="let column of getColumns(row).controls; let colIndex = index" [formGroupName]="colIndex" class="column-section">
-
-                    <div class="col-md-2">
                   <div class="form-group">
-                      <select formControlName="type" class="form-control" >
+                    <select formControlName="type" class="form-control">
                       <option value="" selected disabled>--Select--</option>
                       <option value="text">Text</option>
                       <option value="variable">Variable</option>
                     </select>
                   </div>
+                  <div class="form-group" *ngIf="isText(row, colIndex)">
+                    <input type="text" formControlName="textValue" placeholder="Enter text" class="form-control"
+                    (change)="onParamChange($event, rowIndex, colIndex)"> <span> {{inputValue}} </span>
                   </div>
-                    <div class="col-md-2" *ngIf="isText(row, colIndex)">
+                  <div class="form-group" *ngIf="isVariable(row, colIndex)">
-                      <div class="form-group" >
+                    <input formControlName="variableValue" class="form-control" placeholder="Enter variable">
-                        <input type="text" formControlName="textValue" placeholder="Enter text" class="form-control" (change)="onParamChange($event)" >
                   </div>
                 </div>
-                    <div class="col-md-2" *ngIf="isVariable(row, colIndex)">
-                      <div class="form-group" >
-                        <input formControlName="variableValue" class="form-control" placeholder="Enter variable" >
-                      </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>
+              <button type="button" class="add-column-btn btn btn-success mt-0 " (click)="addColumn(rowIndex)">Add</button>
-
             </div>
           </div>
 
           <!-- Button to add a new row -->
-          <button type="button" (click)="addRow()">Add Row</button>
+          <button type="button" class="add-row-btn btn btn-secondary mr-2 mt-0" (click)="addRow()">Add</button>
 
-          <button type="submit">Submit</button>
+          <button type="submit" class="submit-btn btn btn-success mt-0">Submit</button>
         </form>
       </div>
     </div>

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

@@ -1,71 +1,49 @@
-// General form styles
+.container
-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
+.add-col-section
-        background-color: #218838
+  display: flex
+  flex-direction: row
 
-// Media queries for responsiveness
+.add-col-section div
-@media (max-width: 768px)
+   display:flex
-  .form-row
+   flex-direction: row
-    flex-direction: column
 
-  .form-column
+.column-section
-    flex-direction: column
+  width: auto
-    align-items: flex-start
+  display: flex
+  flex-direction: row
 
-    > *
+.form-group
-      margin-bottom: 10px
+    margin-bottom: 15px
-      width: 100%
+    width: 150px
+    display: flex
+    margin-right: 10px!important
 
+.add-column-btn
+  margin-top: 10px
+  display: block
+
+.add-row-btn
+  margin-top: 20px
+
+.submit-btn
+  margin-top: 30px
+
+.row-section
+  border: 1px solid #ccc
+  padding: 20px
+  margin-bottom: 20px
+  position: relative
+
+@media (min-width: 768px)
+  .add-col-section
+    display: flex // Ensures that the columns are stacked vertically
+
+  .column-section
+        display: flex
+        margin-bottom: 15px
+        flex-direction: row
+
+  .row-section
+    padding: 20px

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

@@ -17,7 +17,8 @@ export class VeriableFormComponent implements OnInit {
   variableList = ['Variable 1', 'Variable 2', 'Variable 3'];
   public componentDestroyed = new Subject();
   rdsValues: any;
-  selectedParamValue: any;
+  selectedParamValue: any = {};
+  inputValue: any;
 
   constructor(private fb: FormBuilder, private api: ApiService) {
     this.form = this.fb.group({
@@ -79,18 +80,26 @@ export class VeriableFormComponent implements OnInit {
     });
   }
 
-  onParamChange(event: any) {
+  onParamChange(event: any, rowIndex: number, colIndex: number) {
     const selectedParam = event.target.value;
-    // Iterate through the 'modbus' array and find the parameter
+
     for (let item of this.rdsValues.modbus) {
       if (item.hasOwnProperty(selectedParam)) {
-        this.selectedParamValue = item[selectedParam];
+        // Initialize the row if not present
+        if (!this.selectedParamValue[rowIndex]) {
+          this.selectedParamValue[rowIndex] = {};
+        }
+        // Assign the selected param value to the specific row and column
+        this.selectedParamValue[rowIndex][colIndex] = item[selectedParam];
         break;
       }
     }
-    console.log(this.selectedParamValue);
 
+      this.inputValue = this.selectedParamValue[rowIndex][colIndex]
+    console.log(`Row: ${rowIndex}, Column: ${colIndex}, Value:`, this.selectedParamValue[rowIndex][colIndex]);
   }
+
+
   onSubmit(): void {
     console.log(this.form.value);
   }