Send angular form

1

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 as a reference

    
asked by anonymous 04.09.2018 / 00:38

1 answer

2

I've arranged here for you to see on my stackblits,

link

First you do not need value and max-length. You can do the validation when you create and the value of the left that this is the initial value. If you want to change the value you can do form.setValue (...), according to your form structure this is wrong as you have an array you need the 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}}
    
04.09.2018 / 10:15