Currently working on inline editing in my project, I am attempting to patch value data from the server. Within my formArray for the accountNumbers array, I am encountering an issue when trying to change the value of inputs. The error message reads: Error: Cannot find control with path: 'type -> options -> 0 -> accountNumbers -> accountNumber'. What might be causing this problem? For reference, here is my stackblitz
.ts
this.editCompanies = this._formBuilder.group({
type: this._formBuilder.group({
options: this._formBuilder.array([]),
}),
});
const control = <FormArray>this.editCompanies.get('type.options');
this.items.forEach((x) => {
control.push(
this.patchValues(x.name, x.identificationCode, x.accountNumbers)
);
console.log(control);
});
}
patchValues(name, identificationCode, accountNumbers) {
return this._formBuilder.group({
name: [name],
identificationCode: [identificationCode],
accountNumbers: new FormArray([this.initOptions()]),
});
}
initOptions() {
return new FormGroup({
accountNumber: new FormControl(''),
});
}
.html
<div class="col-lg-5 accountNumbers">
<span formArrayName="accountNumbers">
<span class="value" [ngClass]="{'my_class': hidemeSub[index] === true}"
[hidden]="hidemeSub[index]"> {{item.accountNumbers}}</span>
<input type="text" class="form-control" formControlName="accountNumber" [hidden]="!hidemeSub[index]">
</span>
</div>