Seeking to implement a formGroup that dynamically adjusts based on JSON data like this:
const LIMITS: Limit[] = [
{
id: 'limit1',
value: 1000,
disabled: false
},
{
id: 'limit2',
value: 500,
disabled: true
},
{
id: 'limit3',
value: 5000,
disabled: true
}
]
While utilizing formArray as suggested in this explanation produces desired results, there is an issue with losing the essential `id` information needed for matching edited values. Is there a method to generate a dynamic form with custom `formControlName` identifiers? Take a look at the StackBlitz example based on the same enquiry here.
UPDATE
Previously attempted using `FormGroup`, but encountered errors upon initialization.
Error: Cannot find control with path: 'limits -> limit1'
Error: Cannot find control with path: 'limits -> limit2'
Error: Cannot find control with path: 'limits -> limit3'
Realizing that when inputs are...refer to this StackBlitz demo for further insights here.
UPDATE
Solution was discovered by defining `limits` and employing `setControl` during data subscription.
ngOnInit() {
this.form = this.fb.group({
limits: this.fb.group({})
})
this.limits$.subscribe((limits: Limit[]) => {
this.form.setControl('limits', this.addLimits(limits));
});
}
Check out the interactive StackBlitz demonstration here