As a newcomer to Angular, I am in the process of creating a complex form for a food delivery application that I have been developing.
The form I am currently working on is designed to allow me to add a new menu item to a restaurant's menu.
In this Angular form, there is a section dedicated to addons such as sauces and flavors. The data structure includes an array named addons which contains objects representing different addon types along with arrays of options related to each type.
To create a new addon within the addons array, I have implemented a method that takes two inputs: one for the name (a standard string input) and another nested array containing all the addon options for that type.
While I am able to successfully add new addons and their options, I encounter an issue when trying to update the values of nested options. Specifically, I am unable to assign a formControlName to each option, which is necessary for updating their values. This results in the error message:
vendor.js:63956 ERROR Error: Cannot find control with path: 'addons -> 0 -> 0 -> option
I am unsure how to provide a unique formcontrol name to each newly created option to enable value updates. Any assistance on this matter would be greatly appreciated.
Below is the code snippet:
Main Form:
menuForm = this.builder.group({
name: this.builder.control<string>('', Validators.required),
price: this.builder.control<string>('', Validators.required),
description: this.builder.control<string>('', Validators.required),
itemType: this.builder.control<string>('', Validators.required),
image: this.builder.control<NonNullable<any>>('', Validators.required),
imageName: this.builder.control<string>('', Validators.required),
categories: this.builder.array([]),
relatedsides: this.builder.array([]),
addons: this.builder.array([]),
});
Functions for adding a new addon and its option:
addAddon() {
const addOnForm = this.builder.group({
addonname: ['', Validators.required],
addonoptions: this.builder.array([]),
});
this.addons.push(addOnForm);
}
addAddonOption(i: number) {
const addOnOptionForm = this.builder.group({
option: this.builder.control<string>(''),
});
this.addons.value[i].addonoptions.push(addOnOptionForm);
console.log('addons with options', this.addons.value);
}
HTML:
<!-- Addons Array -->
<ng-container type="form" formArrayName="addons">
<h4>Add Addons</h4>
<ng-container *ngFor="let addOnForm of addons.controls; let x = index">
<div [formGroupName]="x" class="addons-form-row">
<mat-form-field appearance="fill">
<input matInput placeholder="Addon" formControlName="addonname" />
</mat-form-field>
<button type="button" (click)="deleteAddOn(x)">Delete Addon</button>
<button type="button" (click)="addAddonOption(x)">
add addon option
</button>
<ng-container
*ngFor="
let addonoption of addons.value[x].addonoptions;
let k = index
"
>
<div [formGroupName]="k" class="imbeded-addon-options">
<mat-form-field appearance="fill">
<input
matInput
type="text"
placeholder="Add On Option"
formControlName="option"
/>
</mat-form-field>
</div>
</ng-container>
</div>
</ng-container>
</ng-container>
<div>
<button type="button" (click)="addAddon()">Add Addon</button>
</div>