0
I have an ngFor with dynamically generated fields by adding rows or columns.
but if the user decides to put more than one column or row, the value of the form will only come with the last value that the user typed.
How could I get all the data from all the inputs?
HTML:
<div class="container">
<div class="form">
<div class="header-content">
<p>Infome os dados</p>
<div class="line"></div>
</div>
<div class="form-content">
<form [formGroup]="form">
<table>
<tr class="add-and-remove">
<th></th>
<th><i class="fa fa-times" aria-hidden="true" (click)="removeColum()"></i></th>
<th><i class="fa fa-plus" (click)="addColum()"></i></th>
</tr>
<tr class="form-of">
<td>
<div class="select-wrapper">
<select>
<option value="maximizar">Maximizar</option>
<option value="minimizar">Minimizar</option>
</select>
</div>
</td>
<td class="variable-input" *ngFor="let num of colums">
<div class="colums">
<input type="text" placeholder="?" formControlName="functionVar">
<p>X{{ num }}</p>
<i class="fa fa-plus" *ngIf="numberOfColums > 1"></i>
</div>
</td>
<td></td>
</tr>
<tr class="form-st" *ngFor="let numLines of lines; first as isFirst">
<td>
<p *ngIf="isFirst">Sujeito à:</p>
</td>
<td *ngFor="let num of colums">
<div class="colums">
<input type="text" placeholder="?" formControlName="decisionsVar">
<p>X{{ num }}</p>
<i class="fa fa-plus" *ngIf="numberOfColums > 1"></i>
</div>
</td>
<td>
<select>
<option value="equals0"> ==0 </option>
<option value="greater0"> >=0 </option>
<option value="less0"> <= </option>
</select>
</td>
<td>
<div class="colums">
<input type="text" placeholder="?" formControlName="restrictionsVar">
</div>
</td>
<td>
<i class="fa fa-times" (click)="removeLine()"></i>
</td>
</tr>
<tr>
<td></td>
<td *ngFor="let num of colums">
<div>
<select>
<option value="maximizar"> >=0 </option>
<option value="minimizar"> <=0 </option>
<option value="minimizar"> livre </option>
</select>
</div>
</td>
<td></td>
<td></td>
<td>
<i class="fa fa-plus" (click)="addLine()"></i>
</td>
</tr>
</table>
</form>
</div>
<hr>
<div class="transformBtn">
<button type="submit" (click)="onSubmit(form)">Salvar</button>
</div>
</div>
</div>
Component.
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, FormArray, FormControl, Validators} from '@angular/forms';
@Component({
selector: 'app-main',
templateUrl: './main.component.html',
styleUrls: ['./main.component.css']
})
export class MainComponent implements OnInit {
form: FormGroup;
numberOfColums: number = 1;
numberOfLines: number = 1;
colums: any;
lines: any;
arr:any
constructor(private fb: FormBuilder) { }
ngOnInit(): void {
this.createTableaux()
this.form = this.fb.group({
functionVar: ['', Validators.required],
decisionsVar: ['', Validators.required],
restrictionsVar: ['', Validators.required]
})
}
onSubmit(form){
console.log(form)
}
createTableaux(){
this.colums = Array(this.numberOfColums)
this.colums = this.colums.fill().map((x,i)=> i == 0 ? 1 : i + 1);
this.lines = Array(this.numberOfLines)
this.lines = this.lines.fill().map((x,i)=> i == 0 ? 1 : i + 1);
}
addColum(){
this.numberOfColums++
this.createTableaux()
}
removeColum(){
if(this.numberOfColums > 1){
this.numberOfColums--
this.createTableaux()
}
this.createTableaux()
}
addLine(){
this.numberOfLines++
this.createTableaux()
}
removeLine(){
if(!(this.numberOfLines <= 1)){
this.numberOfLines--
this.createTableaux()
}
this.createTableaux()
}
}
Voce has to use formArray
– Eduardo Vargas
@Eduardovargas of what form?
– Guilherme Henrique