I seem to be encountering an error specifically when the control is placed within a formArray. The issue arises with a mat-select element used for selecting days of the week, leading to the following error message:
What might I be doing incorrectly to trigger this error?
vendor.js:65387 ERROR TypeError: this.validator is not a function
at FormControl._runValidator (vendor.js:106921)
at FormControl.updateValueAndValidity (vendor.js:106882)
at new FormControl (vendor.js:107326)
at FormBuilder.control (vendor.js:111089)
at FormBuilder._createControl (vendor.js:111149)
...
The data structure returned inside the 'element' object accessed through 'professionals.forEach' looks like this:
element: {
daysService: [2, 3],
endService: "",
id: "45ySYbmImayrgv7teqWr",
startService: "",
name: "Name professional",
rooms: [],
};
Snippet from form.component.ts:
this.weekDays = [
{ label: 'Sunday', value: 0 },
{ label: 'Monday', value: 1 },
{ label: 'Tuesday', value: 2 },
...
];
this.professionals
.pipe(takeUntil(this._unsubscribeAll))
.subscribe(professionals => {
if (!professionals) return;
this.setProfessionalsUnity(professionals);
});
private _buildForm(): void {
this.form = this._formBuilder.group({
professionals: this._formBuilder.array([])
});
}
...
public addGroupProfessional() {
return this._formBuilder.group({
id: [''],
name: [''],
rooms: [''],
daysService: [''],
startService: [''],
endService: ['']
});
}
Excerpt from form.html:
<form [formGroup]="form">
<mat-accordion formArrayName="professionals">
...
</form>