Opa arrumei aqui pra vc veja no meu stackblits,
https://stackblitz.com/edit/angular-yeqm1j?file=src%2Fapp%2Fapp.component.ts
Primeiro vc não precisa do value e do max-length. Voce pode fazer a validacao quando cria e o valor da esquerda que esta '' e o valor incial. Se vcquiser mudar o valor vc pode fazer form.setValue(...), Segundo sua estrutra do form esta errada como vc tem um array vc precisa o formArray pra criar o formgroup pra cada elemento.
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}} pos</td>
<td class="col-3"><input type="text" class="form-control" formControlName="pos"></td>
<td class="col-1">{{i}} 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}}