title: angular form.io builder how to customize list of components and list of attribute per component
body: <p>I am using form.io and angular 10.</p>
  <p>I was able to create a demo project of form.io in the angular cli .</p>
  <p>I was also able to create a <strong>custom component</strong> as well and set my own editForm  for the component.</p>
  <pre><code>import { Injector } from '@angular/core';
  import { FormioCustomComponentInfo, registerCustomFormioComponent } from 'angular-formio';
  import { AggridWrapperComponent } from './aggrid-wrapper.component';
  
  export function minimalEditForm() {
    return {
      components: [
        { key: 'type', type: 'hidden' },
        {
          weight: 0,
          type: 'textfield',
          input: true,
          key: 'label',
          label: 'Label',
          placeholder: 'Label',
          validate: {
            required: true,
          },
        },
        {
          weight: 10,
          type: 'textfield',
          input: true,
          key: 'key',
          label: 'Field Code',
          placeholder: 'Field Code',
          tooltip: 'The code/key/ID/name of the field.',
          validate: {
            required: true,
            maxLength: 128,
            pattern: '[A-Za-z]\\w*',
            patternMessage:
              'The property name must only contain alphanumeric characters, underscores and should only be started by any letter character.',
          },
        },
        {
          weight: 20,
          type: 'textfield',
          input: true,
          key: 'customOptions.myOption',
          label: 'My Custom Option',
          placeholder: 'My Custom Option',
          validate: {
            required: true,
          },
        },
      ],
    };
  }
  const COMPONENT_OPTIONS: FormioCustomComponentInfo = {
    type: 'myaggrid',
    selector: 'my-grid',
    editForm:minimalEditForm,
    title: 'agGrid',
    group: 'basic',
    icon: 'fa fa-star',
  };
  
  
  export function registerAgGridComponent(injector: Injector) {
    registerCustomFormioComponent(COMPONENT_OPTIONS, AggridWrapperComponent, injector);
  
  }
  </code></pre>
  <p>Overall the form.io builder gives a lot of components to drag and drop .</p>
  <p>But in fact I need a small number of components and in each component reduce the number of attributes/properties or set my own properties.</p>
  <p>I try like this but not work</p>
  <pre><code>&lt;form-builder [form]='{
      &quot;title&quot;: &quot;My Test Form&quot;,
      &quot;components&quot;: [
          {
              &quot;type&quot;: &quot;textfield&quot;,
              &quot;input&quot;: true,
              &quot;tableView&quot;: true,
              &quot;inputType&quot;: &quot;text&quot;,
              &quot;inputMask&quot;: &quot;&quot;,
              &quot;label&quot;: &quot;First Name&quot;,
              &quot;key&quot;: &quot;firstName&quot;,
              &quot;placeholder&quot;: &quot;Enter your first name&quot;,
              &quot;prefix&quot;: &quot;&quot;,
              &quot;suffix&quot;: &quot;&quot;,
              &quot;multiple&quot;: false,
              &quot;defaultValue&quot;: &quot;&quot;,
              &quot;protected&quot;: false,
              &quot;unique&quot;: false,
              &quot;persistent&quot;: true,
              &quot;validate&quot;: {
                  &quot;required&quot;: true,
                  &quot;minLength&quot;: 2,
                  &quot;maxLength&quot;: 10,
                  &quot;pattern&quot;: &quot;&quot;,
                  &quot;custom&quot;: &quot;&quot;,
                  &quot;customPrivate&quot;: false
              },
              &quot;conditional&quot;: {
                  &quot;show&quot;: &quot;&quot;,
                  &quot;when&quot;: null,
                  &quot;eq&quot;: &quot;&quot;
              }
          },
          {
              &quot;type&quot;: &quot;textfield&quot;,
              &quot;input&quot;: true,
              &quot;tableView&quot;: true,
              &quot;inputType&quot;: &quot;text&quot;,
              &quot;inputMask&quot;: &quot;&quot;,
              &quot;label&quot;: &quot;Last Name&quot;,
              &quot;key&quot;: &quot;lastName&quot;,
              &quot;placeholder&quot;: &quot;Enter your last name&quot;,
              &quot;prefix&quot;: &quot;&quot;,
              &quot;suffix&quot;: &quot;&quot;,
              &quot;multiple&quot;: false,
              &quot;defaultValue&quot;: &quot;&quot;,
              &quot;protected&quot;: false,
              &quot;unique&quot;: false,
              &quot;persistent&quot;: true,
              &quot;validate&quot;: {
                  &quot;required&quot;: true,
                  &quot;minLength&quot;: 2,
                  &quot;maxLength&quot;: 10,
                  &quot;pattern&quot;: &quot;&quot;,
                  &quot;custom&quot;: &quot;&quot;,
                  &quot;customPrivate&quot;: false
              },
              &quot;conditional&quot;: {
                  &quot;show&quot;: &quot;&quot;,
                  &quot;when&quot;: null,
                  &quot;eq&quot;: &quot;&quot;
              }
          },
          {
              &quot;input&quot;: true,
              &quot;label&quot;: &quot;Submit&quot;,
              &quot;tableView&quot;: false,
              &quot;key&quot;: &quot;submit&quot;,
              &quot;size&quot;: &quot;md&quot;,
              &quot;leftIcon&quot;: &quot;&quot;,
              &quot;rightIcon&quot;: &quot;&quot;,
              &quot;block&quot;: false,
              &quot;action&quot;: &quot;submit&quot;,
              &quot;disableOnInvalid&quot;: true,
              &quot;theme&quot;: &quot;primary&quot;,
              &quot;type&quot;: &quot;button&quot;
          }
      ]
  }' (change)=&quot;onChange($event)&quot; language=&quot;he&quot;&gt;&lt;/form-builder&gt;
  </code></pre>
  <p>How can i define my own list of components and configure attribures/properties in each components?</p>