Cannot disable individual options in select

[elyas-bhy]

We currently cannot disable individual options in the select component:

{
  type: "select",
  key: "name",
  templateOptions: {
    label: "Name",
    theme: "custom",
    multiple: true,
    labelProp: "firstName",
    valueProp: "id",
    options: [
        {firstName: "Sarah", id: 1, disabled: true},  // I need to display this option in a disabled state
        {firstName: "Jessica", id: 2},
        {firstName: "Parker", id: 3}
    ],
    onOpen: () => {
      console.log('select is opened');
    },
    onClose: () => {
      console.log('select is closed');
    }
  }
}

[gmanriqueUy]

@kamilkisiela if I make a PR for this, would you merge it?

[kamilkisiela]

@U-like YES!

[kamilkisiela]

@U-like @mention me there

Maybe you want to take in charge of this repository?

[gmanriqueUy]

@kamilkisiela I really would like that, but I've never been in charge of a repository. Maybe this is an opportunity to learn how to do it.

[pdonorio]

@U-like please do! This is very important for people using Formly and Angular Material, they are both great tools!

[vincaslt]

Angular documentation specifies, that to disable a single option you need to set notAnOption flag to true. I'd say this should be implemented here, dang I was sure I've seen it working previously with this lib..

Imho, it's as simple as adding: <md-option ng-disabled="option.notAnOption" ...>.

[vincaslt]

For my use case, I did this sort of workaround:

  formlyConfig.setType({
      name: 'my-select',
      extends: 'select',
      template: `
        <md-select ng-model="model[options.key]" md-theme="{{to.theme}}">
          <md-option ng-disabled="option.notAnOption" ng-repeat="option in to.options" ng-value="option[to.valueProp || 'value']">
            {{ option[to.labelProp || 'name'] }}
          </md-option>
        </md-select>
      `
    });

And you can mark option as disabled as per angular docs: { name: '...', value: '...', notAnOption: true }