Send angular form

Question

Good I’m sending a form via angular, but the data is not getting updated in the backend?

<form [formGroup]="categoriaForm" (ngSubmit)="salvarCategoria()">
  <tr *ngFor="let data of config; let i = index;" class="d-flex">
    <td class="col-1">{{i}}&nbsp;&nbsp;&nbsp;</td>
    <td class="col-3"><input type="text" class="form-control" placeholder="_" formControlName="pos" [value]="data.pos" maxlength="7"></td>
    <td class="col-5">&nbsp;&nbsp;&nbsp;{{data.legend}}&nbsp;&nbsp;&nbsp;</td>
    <td class="col-3"><input type="text" class="form-control" placeholder="_" formControlName="limit" [value]="data.limit" maxlength="7"></td>
  </tr>
</form>
<br><a (click)="categoriaAtualizar()">send</a>

Problem link also as reference

Answer 1

Opa arranged here for you see in my stackblits,

https://stackblitz.com/edit/angular-yeqm1j?file=src%2Fapp%2Fapp.component.ts

First you do not need value and max-length. You can do the validation when you create and the value of the left that is '' is the initial value. If you want to change the value you can form.setValue(...), According to your structure of the form is wrong as you have an array you need formArray to create the formgroup for each element.

ts

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators, FormArray } from '@angular/forms';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  public config: any = [{ id: "basic1", legend: "Basic 1", limit: 3, pos: 1 },
  { id: "basic2", legend: "Basic 2", limit: 3, pos: 2 },
  { id: "basic3", legend: "Basic 3", limit: 3, pos: 3 }];
  categoriaForm: FormGroup;

  constructor(private formBuilder: FormBuilder) {
  }

  ngOnInit() {
    this.categoriaForm = this.formBuilder.group({
      items: this.formBuilder.array([this.createFormGroup(), this.createFormGroup(), this.createFormGroup()])
    });;
    console.log(this.items)
  }

  get items(): FormArray {
    return this.categoriaForm.get('items') as FormArray;
  }

  createFormGroup() {
    return this.formBuilder.group({
      pos: ['', [Validators.required, Validators.maxLength(7)]],
      limit: ['', [Validators.required, Validators.maxLength(7)]]
    });

  }
  categoriaAtualizar() {
    const configToStore = {
      ...this.config,
      ...this.categoriaForm.value
    }
    console.log(configToStore);
  }
}

html

<form [formGroup]="categoriaForm">
    <ng-container *ngFor="let item of items.controls; let i = index;">
        <tr class="d-flex" [formGroup]="item">
            <td class="col-1">{{i}}&nbsp;&nbsp;&nbsp; pos</td>
            <td class="col-3"><input type="text" class="form-control" formControlName="pos"></td>
                <td class="col-1">{{i}}&nbsp;&nbsp;&nbsp; limit</td>
            <td class="col-3"><input type="text" class="form-control" formControlName="limit"></td>
        </tr>
    </ng-container>
</form>
<br>
<a (click)="categoriaAtualizar()">send</a>

{{items.value|json}}