Formcontrolname inside an Ngfor

Asked

Viewed 33 times

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()
  }
}

No answers

Browser other questions tagged

You are not signed in. Login or sign up in order to post.