如何在使用ngx-formly时将panelClass属性应用于``?

huangapple go评论58阅读模式
英文:

Angular Material 15: How can I apply the panelClass property to `<mat-select>` using ngx-formly?

问题

我想要为Angular Material的<mat-select>下拉面板设置特定宽度。我们在项目中使用formly来生成表单。

这是一个选择字段示例配置的样子:

form: new FormGroup({}),
options: {} as FormlyFormOptions,
fields: [
  {
    key: 'actionSelect',
    type: 'select',
    props: {
      attributes: {
        panelClass: 'example-panel-class',
      },
      translate: true,
      required: true,
      options: [
        { value: 'exampleValue-1', label: 'exampleLabel-1' },
        { value: 'exampleValue-2', label: 'exampleLabel-2' },
        { value: 'exampleValue-3', label: 'exampleLabel-3' },
      ],
    },
  },
]

我尝试通过上述的attributes属性来添加Angular Material的panelClass,但它并没有产生预期的效果,即未将CSS类example-panel-class添加到下拉面板。

英文:

I'd like to style the dropdown panel of Angular Material &lt;mat-select&gt; with a specific width.
We're using formly to generate forms in the project.

This is how an example configuration of a select field looks like:

      form: new FormGroup({}),
      options: {} as FormlyFormOptions,
      fields: [
        {
          key: &#39;actionSelect&#39;,
          type: &#39;select&#39;,
          props: {
            attributes: {
              panelClass: &#39;example-panel-class&#39;,
            },
            translate: true,
            required: true,
            options: [
              { value: &#39;exampleValue-1&#39;, label: &#39;exampleLabel-1&#39; },
              { value: &#39;exampleValue-2&#39;, label: &#39;exampleLabel-2&#39; },
              { value: &#39;exampleValue-3&#39;, label: &#39;exampleLabel-3&#39; },
            ],
          },
        },
      ]

I tried to add Angular Material panelClass via the attributes property, as seen above but it does not lead to the expected behaviour of adding the css class example-panel-class to the dropdown panel.

答案1

得分: 1

你可以直接在 FormlyFieldConfig 中像下面这样添加 panelClass 属性 -

    {
      key: 'select',
      type: 'select',
      props: {
        label: 'Select',
        placeholder: 'Select placeholder',
        required: true,
        options: [
          { label: 'Option 1', value: '1' },
          { label: 'Option 2', value: '2' },
          { label: 'Option 3', value: '3' },
        ],
        panelClass: 'test-class',
      },
    }

Stackblitz 演示

英文:

May be I am late to the party, but for those who are still looking for answers -

You can add panelClass prop directly in the FormlyFieldConfig like given below -

    {
      key: &#39;select&#39;,
      type: &#39;select&#39;,
      props: {
        label: &#39;Select&#39;,
        placeholder: &#39;Select placeholder&#39;,
        required: true,
        options: [
          { label: &#39;Option 1&#39;, value: &#39;1&#39; },
          { label: &#39;Option 2&#39;, value: &#39;2&#39; },
          { label: &#39;Option 3&#39;, value: &#39;3&#39; },
        ],
        panelClass: &#39;test-class&#39;,
      },
    },

Stackblitz demo

huangapple
  • 本文由 发表于 2023年2月24日 16:27:49
  • 转载请务必保留本文链接:https://go.coder-hub.com/75554182.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定