[ngx-formly] Use 3rd party Form Controls with Angular Formly / Custom type

In a real form you'll most likely want to add some 3rd party form controls. For example autocomplete fields, date-time pickers etc. In this lesson we're going to see how to use ng-select and configure it s.t. it can be used within our Formly form.

customs/ng-select.typs.ts:

import { Component } from '@angular/core';
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 | async"
        [placeholder]="to.label"
        [bindValue]="to.bindValue || 'value'"
        [formControl]="formControl"
        [class.is-invalid]="showError"
      >
      </ng-select>
    </div>
  `,
})
export class NgSelectFormlyComponent extends FieldType {}

app.module.ts:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { ReactiveFormsModule, FormControl, ValidationErrors } from '@angular/forms';
import { FormlyModule, FormlyFieldConfig } from '@ngx-formly/core';
import { FormlyMaterialModule } from '@ngx-formly/material';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NgSelectModule } from '@ng-select/ng-select';

import { SharedModule } from './shared/shared.module';
import { NgSelectFormlyComponent } from './customs/ng-select.type';

// global min error message, you can override by validation.messages.min in field
export function minValidationMessage(err, field: FormlyFieldConfig) {
  return `Please provide a value bigger than ${err.min}. You provided ${err.actual}`;
}

export function ipValidationMessage(err, field: FormlyFieldConfig) {
  return `"${field.formControl.value}" is not a valid IP address`;
}

export function IpValidator(control: FormControl): ValidationErrors {
  return !control.value || /(d{1,3}.){3}d{1,3}/.test(control.value) ? null : { ip: true };
}

@NgModule({
  declarations: [AppComponent, NgSelectFormlyComponent],
  imports: [
    BrowserModule,
    SharedModule,
    NgSelectModule,
    ReactiveFormsModule,
    FormlyModule.forRoot({
      validators: [
        {
          name: 'ip',
          validation: IpValidator,
        },
      ],
      validationMessages: [
        {
          name: 'required',
          message: 'This field is required',
        },
        {
          name: 'min',
          message: minValidationMessage,
        },
        {
          name: 'ip',
          message: ipValidationMessage,
        },
      ],
      types: [
        {
          name: 'my-autocomplete',
          component: NgSelectFormlyComponent,
        },
      ],
    }),
    FormlyMaterialModule,
    BrowserAnimationsModule,
  ],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

app.component.ts:

    {
      key: 'nationId',
      type: 'my-autocomplete',
      templateOptions: {
        label: 'Nation',
        options: this.dataService.getNations(),
      },
    },