Good Day.
I looked for the solution, and even though there are a view similar question to what I am asking, I am sure this one is a bit more unique and not a duplicate.
here is my html form:
<div class="form-group col-md-6" formGroupName="schema">
<div formArrayName="currencies">
<input type="text" class="form-control" id="percentage" formControlName="percentage" placeholder="Discount %*" required>
</div>
</div>
and here is my ts formBuilder.
this.createPromo = this.fb.group({
type: ['promotion'],
name: ['', Validators.required],
description: ['', Validators.required],
enabled: ['', Validators.required],
promotion_type: ['', Validators.required],
start: ['', Validators.required],
end: ['', Validators.required],
schema: this.fb.group({
currencies: this.fb.array([
this.fb.group({
percentage: '',
currency: 'ZAR'
})
])
}),
});
So I want my form to submit as a grouped array. However the error in the console is the following Cannot find control with path: 'schema -> currencies -> percentage', thus I am not able to submit my form as percentage is empty even after I input a number.
divwithformArrayName="currencies"and inside that another[formGroup]="i"where I would be the index of the array elements you loop through, and then inside that, you'll have yourformControlName="percentage"andformControlName="currency"