UPGRADE-5.0.md

UPGRADE FROM 4.0 to 5.0

@ngx-formly/core

Note: this only affect the user's who create a custom field type.

• Custom field type FieldType: in case of creating a custom field that extend FieldType, calling super.{ngOnInit, ngOnChanges, ngDoCheck, ngAfterViewInit, ngOnDestroy} is not allowed anymore.

Before:

export class CustomFormlyField extends FieldType {
  ngOnInit() {
    super.ngOnInit();
    ...
  }
}

After:

export class CustomFormlyField extends FieldType {
  ngOnInit() {
    ...
  }
}

• FormlyValidationMessage: the deprecated fieldForm input is removed

Before:

<formly-validation-message [field]="field"  [fieldForm]="formcontrol"></formly-validation-message>

After:

<formly-validation-message [field]="field"></formly-validation-message>

• rename Field to FieldType

Before:

import { Field } from '@ngx-formly/core';

After:

import { FieldType } from '@ngx-formly/core';

• passing model, options and form inputs to formly-field component is not required anymore:

Before:

<formly-field [form]="form" [field]="field" [options]="options" [model]="model"></formly-field>

After:

<formly-field [field]="field"></formly-field>

• using createControl to create custom form control is deprecated, use prePopulate hook instead:

Before:

export class FormlyFieldCustomType extends FieldType {
  static createControl(model: any, field: FormlyFieldConfig): AbstractControl {
    return new FormControl(...);
  }
}

After:

export class FormlyFieldCustomType extends FieldType {
  prePopulate(field: FormlyFieldConfig) {
    if (field.formControl) {
      return;
    }

    field.formControl = new FormControl(...);
  }
}

• lifecycle option has been renamed to hooks with a change in the callback signature:

Before:

  fields = [
    {
      key: 'email',
      ...
      lifecycle: {
        onInit: (form, field, model, options) => {
          ...
        },
      },
    },
  ]

After:

  fields = [
    {
      key: 'email',
      ...
      hooks: {
        onInit: (field) => {
          const { form, model, options } = field;
          ...
        },
      },
    },
  ]

Warning: onChanges under hooks doens't take account of model, options and form changes (#1241).

• manipulators config is deprecated in favor of extension:

Before:

FormlyModule.forRoot({
  manipulators: [{ method: 'run', class: TemplateAddons }],
})

After:

FormlyModule.forRoot({
  extensions: [{ name: 'addons', extension: addonsExtension }],
})

• Passing content inside the 'formly-form' tag is deprecated.

Before:

<formly-form>
  <button>Submit</button>
</formly-form>

After:

<formly-form></formly-form>
<button type="submit">Submit</button>

• Passing 'immutable' attribute to 'formly-form' component is deprecated since v5.5, enable immutable mode through NgModule declaration instead.

Before:

<formly-form immutable></formly-form>

After:

@NgModule({
  imports: [
    FormlyModule.forRoot({
      extras: { immutable: true }
    }),
  ],
})

• Passing legacy select option {key, value} is deprecated since v5.5, use {value, label} instead.

{
  type: 'select',
  templateOptions: {
    options: [
--      { key: '1', value: 'label 1' },
++      { value: '2', label: 'label 2' },
    ],
  }
}

@ngx-formly/material

Note: this only affect the user's who import sub-modules of @ngx-formly/material instead of main module FormlyMaterialModule.

• textarea: textarea is moved into a new sub-module named FormlyMatTextAreaModule and is not part of FormlyMatInputModule anymore.

Before:

import { FormlyMatInputModule } from '@ngx-formly/material/input';

After:

import { FormlyMatInputModule } from '@ngx-formly/material/input';
import { FormlyMatTextAreaModule } from '@ngx-formly/material/textarea';

• multicheckbox: multicheckbox is moved into a new sub-module named FormlyMatMultiCheckboxModule and is not part of FormlyMatCheckboxModule anymore.

Before:

import { FormlyMatCheckboxModule } from '@ngx-formly/material/checkbox';

After:

import { FormlyMatCheckboxModule } from '@ngx-formly/material/checkbox';
import { FormlyMatMultiCheckboxModule } from '@ngx-formly/material/multicheckbox';

@ngx-formly/bootstrap

• the deprecated wrappers ('label', 'fieldset', 'description', 'validation-message') has been removed, you may use form-field instead (for a smooth upgrade, ensure updating to version 4.7 first)

• bootstrap v3 support is removed, so if you still using the v3 you may check the migrating to v4 https://getbootstrap.com/docs/4.0/migration/

@ngx-formly/ionic

The library now require the Ionic V4 (https://blog.ionicframework.com/announcing-ionic-4-beta/).