Currently, I am experimenting with ng-select and ngx-formly within Angular 11 by following the tutorials provided in the official documentation.
However, my implementation is resulting in errors that can be viewed here: https://i.sstatic.net/rc0PH.png
I would greatly appreciate any assistance in identifying where I may have gone wrong in my code or if there are any missed steps in my process.
Below is an example of my current implementation:
import { Component } from '@angular/core';
import { FormControl } from '@angular/forms';
import { FieldType } from '@ngx-formly/core';
@Component({
selector: 'formly-ng-select',
template: `<div class="mat-input-infix mat-form-field-infix">
<ng-select
[items]= "(to.options|formlySelectOptions:field|async)!"
[placeholder]="to.label || 'placeholder'"
[bindValue]="to.bindValue || 'value'"
[formControl]="formControl">
</ng-select>
</div>`
})
export class NgSelectFormlyComponent extends FieldType {
formControl!: FormControl;}
The custom template shown above is used in my main component as demonstrated below:
fields: FormlyFieldConfig[] = [
{
key: 'nationId',
type: 'my-autocomplete',
// type: 'select',
templateOptions: {
label: 'Nation',
options: this.dataService.getNations()
}
}];
In addition to this implementation, I have included it in my app.module configuration as outlined below:
FormlyModule.forRoot({
types: [{
name: 'my-autocomplete',
component: NgSelectFormlyComponent,
// wrappers: ['form-field'],
}]
})]