When I execute the following code:
this.formArray = new FormArray([
new FormControl(''),
new FormControl(''),
]);
formControlA() {
return this.formArray.at(0);
}
formControlB() {
return this.formArray.at(1);
}
and then use it in a template like this:
<mat-select [formControl]="formControlA>...</mat-select>
<mat-select [formControl]="formControlB>...</mat-select>
I encounter the following error:
Type 'AbstractControl<any, any>' is missing the following properties from type 'FormControl': defaultValue, registerOnChange, registerOnDisabledChange
I am confused as to why the .at() method on FormArray returns an AbstractControl instead of a FormControl, which was the type it was created with. Why is there a discrepancy?
I thought that using casting was discouraged? How can I achieve the desired outcome without relying on what could be considered bad casting?
formControlA() {
return this.formArray.at(0) as unknown as FormControl;
}