-
-
-
-
-
-
-
-
Variable Calculation: {{ calculateVariable(i) }}
+
+
\ No newline at end of file
diff --git a/src/app/pages/veriable-form/veriable-form.component.sass b/src/app/pages/veriable-form/veriable-form.component.sass
index e69de29..9559e06 100644
--- a/src/app/pages/veriable-form/veriable-form.component.sass
+++ b/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%
+
diff --git a/src/app/pages/veriable-form/veriable-form.component.ts b/src/app/pages/veriable-form/veriable-form.component.ts
index 88e3ccc..486a447 100644
--- a/src/app/pages/veriable-form/veriable-form.component.ts
+++ b/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);
+ }
}