I am currently working on creating a form generator component, and I have designed the form field class as shown below:
export type FormField<T, TDropDown = any> =
| InputFormField<T>
| DropdownFormField<TemplateStringsArray, TDropDown>;
export interface InputFormField<T> {
key: Extract<keyof T, string>;
type: 'string' | 'date' | 'number';
}
export interface DropdownFormField<T, TDropDown> {
type: 'dropdown';
key: Extract<keyof T, string>;
dropdownItems: Observable<TDropDown[]>;
dropdownItemTitleKey: keyof TDropDown;
dropdownItemValueKey: keyof TDropDown;
}
There are two types of form fields in this design. If the type of the form field is dropdown, then dropdown items must be filled, otherwise, those fields are not necessary.
In the HTML file, I have implemented this type as follows:
<div *ngFor="let item of formFields" nz-col nzXs="24" nzMd="12" nzLg="8">
<nz-form-item>
<nz-form-label>
{{ item.key }}
</nz-form-label>
<nz-form-control>
<ng-container [ngSwitch]="item.type">
<nz-select
*ngSwitchCase="'dropdown'"
[formControlName]="item.key"
nzShowSearch
>
<nz-option
*ngFor="let option of item.dropdownItems | async"
[nzLabel]="option[item.dropdownItemTitleKey]"
[nzValue]="option[item.dropdownItemValueKey]"
></nz-option>
</nz-select>
</ng-container>
</nz-form-control>
</nz-form-item>
</div>
Even though I used *ngSwitchCase="'dropdown'" to ensure that the item is a dropdown item, I am still encountering this error:
Property 'dropdownItems' does not exist on type 'SarmadInputFormField<T>'
What is the proper way to define a form field class and use it inside a component's HTML file?