Feat:New changes
This commit is contained in:
@@ -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>
|
||||
|
||||
</form>
|
||||
</div>
|
||||
<!-- Button to add a new row -->
|
||||
<button type="button" (click)="addRow()">Add Row</button>
|
||||
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -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%
|
||||
|
||||
|
||||
@@ -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 {
|
||||
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: [''],
|
||||
variable: [''],
|
||||
text: ['']
|
||||
type: [''], // Type can be 'text' or 'variable'
|
||||
textValue: [''], // For text input
|
||||
variableValue: [''] // For variable select
|
||||
});
|
||||
}
|
||||
|
||||
addRow() {
|
||||
this.items.push(this.createItem());
|
||||
addColumn(rowIndex: number): void {
|
||||
const row = this.rows.at(rowIndex).get('columns') as FormArray;
|
||||
row.push(this.createColumn());
|
||||
}
|
||||
|
||||
removeRow(index: number) {
|
||||
this.items.removeAt(index);
|
||||
addRow(): void {
|
||||
const row = this.fb.group({
|
||||
columns: this.fb.array([this.createColumn()]) // Initialize with one column
|
||||
});
|
||||
this.rows.push(row);
|
||||
}
|
||||
|
||||
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('');
|
||||
}
|
||||
onSubmit(): void {
|
||||
console.log(this.form.value);
|
||||
}
|
||||
|
||||
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);
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user