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