Hide filed in Angular Formly

Question

How to hide fields in formly , cause hide expression hiding the DOM by display:none which alter the position of other element in the current and previous rows . I have a requirement to hold on to the postion of elements in current and other rows where any field is hidden(which works with visibility:hidden)

Need help and guidance on how to achieve it in formly

Need help and guidance on how to achieve it in formly

Answer 1

You can use visibility: hidden, this makes the element disappear while maintaining the size

Answer 2

Check the [docs][1]

You can see that, when define an input you has a property hide (by defect is false), so you can do some like

fields: FormlyFieldConfig[] = [
    {
      key: 'email',
      type: 'input',
      hide:true, //<--add this property
      templateOptions: {
        label: 'Email address',
        placeholder: 'Enter email',
        required: true,
       
      }
    },
  ];

You can add a className to your input that you want to "hide"

fields: FormlyFieldConfig[] = [
    {
      key: 'name',
      type: 'input',
      className:'hidden', //<---this one
      templateOptions: {
        label: 'Field 1',
        placeholder: 'Formly is terrific!',
      },
    },
  ];

And, in styles.css (not in the component.css) add some like

formly-field.hidden{
  visibility:collapse
}