Feat:New changes

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

@@ -1,46 +1,49 @@
 <div class="container">
-    <div class="row">
-      <div class="col-md-12">
-        <div class="variableCal">
-          <form [formGroup]="formGroup">
-
-            <div class="form-group" formArrayName="items" *ngFor="let item of items.controls; let i = index">
-              <div class="row" [formGroupName]="i">
-                <div class="col-md-3">
-                  <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 class="row">
+    <div class="col-md-12">
+      <div class="variableCal">
+        <form [formGroup]="form" (ngSubmit)="onSubmit()">
+          <div formArrayName="rows">
+            <div *ngFor="let row of rows.controls; let rowIndex = index" [formGroupName]="rowIndex">
+              <div formArrayName="columns" class="add-col-section">
+                <div *ngFor="let column of getColumns(row).controls; let colIndex = index" [formGroupName]="colIndex">
+                  <div class="row">
+                    <div class="col-md-2">
+                      <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 *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>
+
+              <!-- Button to add a new column in the same row -->
+              <button type="button" class="mb-4" (click)="addColumn(rowIndex)">Add Column</button>
+
             </div>
-            <div class="row">
-                <div class="col-md-12">
-                  <button type="submit" class="btn btn-primary" (click)="onSubmit()" >Submit</button>
-                </div>
-              </div>
+          </div>
+
+          <!-- Button to add a new row -->
+          <button type="button" (click)="addRow()">Add Row</button>
 
-          </form>
-        </div>
+          <button type="submit">Submit</button>
+        </form>
       </div>
     </div>
   </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;
-  variableList = ['Variable1', 'Variable2', 'Variable3'];  // Example variable list
+  form: FormGroup;
+
+  // Sample variable list for dropdown
+  variableList = ['Variable 1', 'Variable 2', 'Variable 3'];
 
   constructor(private fb: FormBuilder) {
-    this.formGroup = this.fb.group({
-      items: this.fb.array([this.createItem()])
+    this.form = this.fb.group({
+      rows: this.fb.array([]) // Form array for multiple rows
     });
   }
 
   ngOnInit(): void {
-
+    // Initialize with one row
+    this.addRow();
   }
 
-  get items() {
-    return this.formGroup.get('items') as FormArray;
+  get rows(): FormArray {
+    return this.form.get('rows') as FormArray;
   }
 
-  createItem(): FormGroup {
-    return this.fb.group({
-      type: [''],
-      variable: [''],
-      text: ['']
-    });
+  getColumns(row: any): FormArray {
+    return row.get('columns') as FormArray;
   }
 
-  addRow() {
-    this.items.push(this.createItem());
+  isText(row: any, colIndex: number): boolean {
+    const columns = this.getColumns(row);
+    return columns.at(colIndex).get('type')?.value === 'text';
   }
 
-  removeRow(index: number) {
-    this.items.removeAt(index);
+  isVariable(row: any, colIndex: number): boolean {
+    const columns = this.getColumns(row);
+    return columns.at(colIndex).get('type')?.value === 'variable';
   }
 
-  onTypeChange(index: number) {
-    const type = this.items?.at(index)?.get('type')?.value;
-    if (type === 'variable') {
-      this.items?.at(index)?.get('text')?.setValue('');
-    } else {
-      this.items?.at(index)?.get('variable')?.setValue('');
-    }
+  createColumn(): FormGroup {
+    return this.fb.group({
+      type: [''], // Type can be 'text' or 'variable'
+      textValue: [''], // For text input
+      variableValue: [''] // For variable select
+    });
   }
 
-  calculateVariable(index: number): string {
-    const selectedVariable = this.items?.at(index)?.get('variable')?.value;
-    return `Calculated value for ${selectedVariable}`;
+  addColumn(rowIndex: number): void {
+    const row = this.rows.at(rowIndex).get('columns') as FormArray;
+    row.push(this.createColumn());
   }
 
-  onSubmit() {
-      const formData = this.formGroup.value;
-      console.log(formData);
-
+  addRow(): void {
+    const row = this.fb.group({
+      columns: this.fb.array([this.createColumn()]) // Initialize with one column
+    });
+    this.rows.push(row);
   }
 
+  onSubmit(): void {
+    console.log(this.form.value);
+  }
 }