Ngx-formly: Unable to override default wrappers 'description' and 'validation-messages'

[Jasonkoolman]

I'm submitting a ... (check one with "x")

[x] bug report
[ ] feature request
[ ] support request

Current behavior
When defining the wrappers a custom field type, I am unable to override the defaults:

FormlyModule.forRoot({
    types: [
        {
            name: 'address',
            component: AddressFieldComponent,
            wrappers: ['fieldset', 'label']
        },
    ],
})

This will append the following wrappers: ["fieldset", "label", "description", "validation-message"]

Expected behavior
My expectation is that only the 'fieldset' and 'label' wrappers should be appended. The wrappers polute the DOM and have no use in this scenario.

Minimal reproduction of the problem with instructions
https://stackblitz.com/edit/ngx-formly-ui-bootstrap-wpcoap?file=app%2Faddress-field.component.ts
This example logs 4 wrappers instead of two. This problem doesn't seem to occur in v3.0.0.

• Angular version: 6.0.0

[samtsai]

This seems to be a design decision added here: https://github.com/formly-js/ngx-formly/pull/826/commits/81a0ad2f81bbebe7d8b87bddd6814089c6613cb6

It might add two additional wrapper DOM elements but unless you have the templateOptions for description and/or showError method defined.

Also, I'm curious with your implementation what you expect to get out of Formly? It currently appears you're essentially building a form via Bootstrap and Angular Form module.

I like the idea of creating an address type as I'm looking to do the same, so I'm curious what your thoughts are.

[aitboudad]

not sure about your use-case :) but anyway with #1004 you can disable them by setting descriptionWrapper and validationWrapper to false:

types: [
  {
    name: 'address',
    wrappers: ['fieldset', 'label'],
    defaultOptions: {
      templateOptions: {
        descriptionWrapper: false,
        validationWrapper: false,
      },
    },
  },
],

[Jasonkoolman]

@aitboudad Thanks a lot for the quick solution, this should do the job!

@samtsai I'm basically defining a custom formly control by creating a reactive form group. Formly implements its controls in a similar fashion. It works pretty good as it will validate the user input, and output an object:

address: {
    city: "Foo"
    houseNumber: "86"
    houseNumberExtension: null
    street: "Bar"
    zipCode: "2020AB"
}

Open this StackBlitz to see how it works (check the console).

I prefer this custom control approach because (1) you can create self-contained components and (2) it uses the Angular's reactive form implementation. This allows for DRY and maintainable code.