Angular forms not recognizing formControlName

I'm building a form which on the top contains filters. I'll show the functions that are called when the error ocurrs

public onChangeSubType(requestSubType: any) {
const typeId = this.filterFormGroup.get('requestType').value.value;
const subTypeId = this.filterFormGroup.get('requestSubType').value.value;
const accountId = this.filterFormGroup.get('account').value;

if (!subTypeId) return;

this.detailList = [];
this.setRequestModel(requestSubType.type);

this.fieldSettings = Utils.manageFields(typeId, subTypeId);
this.buildInvoiceForm();

if (subTypeId === 77) {
this.invoiceFormGroup.patchValue({ terminatedEmployees: true });
this.fetchTerminatedEmployees(accountId);
} else {
this.invoiceFormGroup.patchValue({ terminatedEmployees: false });
this.fetchEmployees(accountId);
}

}


private buildInvoiceForm() {
if (this.invoiceFormGroup) this.invoiceFormGroup.reset();
const requestType = this.filterFormGroup.get('requestType').value.name;
const requestSubType =
this.filterFormGroup.get('requestSubType').value.name;
const mainAccount = this.filterFormGroup.get('mainAccount').value.name;
const account = this.filterFormGroup.get('account').value.name;
const defaultSubject = `${requestType} - ${requestSubType} - ${mainAccount} - ${account}`;
this.extraData = {
employees: this.employees,
categories: this.requestCategories,
};
if (this.fieldSettings) {
this.invoiceFormGroup = new FormGroup({
category: new FormControl('', [Validators.required]),
subject: new FormControl(defaultSubject, [
Validators.required,
Validators.maxLength(200),
]),
selectAll: new FormControl(false),
employee: new FormControl(null, [Validators.required]),
description: new FormControl('', [
Validators.required,
Validators.maxLength(200),
]),
activityDate: new FormControl(''),
attachmentFiles: new FormControl(''),
terminatedEmployees: new FormControl(false),
});
}


invoice.html template

<div class="invoice-request__field flex-basis-30">
<span class="lssai-label font-weight-bold"
>{{
this.invoiceFormGroup.get('terminatedEmployees')?.value
? 'Terminated'
: ''
}}
Employees*</span
>
<ng-multiselect-dropdown
formControlName="employee"
[placeholder]="'Select Employee'"
[settings]="accountMultiSelectSettings"
[data]="employees"
>
</ng-multiselect-dropdown>
</div>


onChangeSubType is called whenever the subType changes and I get the following error

ERROR Error: There is no FormControl instance attached to form control element with name: 'employee'
​

filterValueChanges() is called onInit()

private filterValueChanges() {
this.filterFormGroup.valueChanges.subscribe((form) => {
if (form.requestType === null) {
this.requestSubTypes = null;
}
if (form.requestSubType) {
this.onChangeSubType(form.requestSubType);
}
this.checkForCategoryNotApplyValues();
});
}


Just a final comment. If I change formControlName="employee" for [formControl]="invoiceFormGroup.controls['employee']" it works but gives me a tslint error.

How can I solve the error so I can keep formControlName="employee".

Continue reading...