Material: ng-disabled doesn't disable md-chips

[tamsler]

<md-chips
    ng-model="formData.labels"
    placeholder="+Label"
    readonly="false"
    delete-button-label="Remove label"
    ng-disabled="!formData.source"
    secondary-placeholder="Press Enter to create a label">
</md-chips>

[mohitadwani]

+1 Should be able to disable the input of md-chips

[davidmillercode]

+1

[sharanainapurapu]

Hi,
Is there any solution for the issue, I am also waiting for the solution.

[RolandHeath]

@sharananiapurapu
One workaround would be to use chips with a custom input - for example, if you're using it with an md-autocomplete, you can disable the md-autocomplete. This should work for other custom inputs as well, but I have only used it with autocomplete elements. The docs should have an example with custom inputs.

[sharanainapurapu]

@RolandHeath
Thank you for quick response. I tried this

<md-input-container class="md-block"> <!-- Also tried disabling here-->
    <label>Role(s)</label>
    <md-select ng-model="data.selectedRoleId" ng-change="control.doSelectRole(data.selectedRoleId)" ng-disabled="data.isMyProfile">
        <md-option ng-repeat="role in data.roles" value="{{role.id}}">{{role.name}}</md-option>
    </md-select>
    <div ng-disabled="data.isMyProfile"> <!-- Also tried disabling here-->
        <md-chips class="select-chips" ng-model="data.user.roles">  <!-- Also tried disabling here-->
            <md-chip-template ng-disabled="data.isMyProfile"> <!-- Also tried disabling here-->
                   <span class="md-caption">{{$chip.name}}</span>
            </md-chip-template>
        </md-chips>                 
    </div>          
</md-input-container>

formated_code.pdf
It did not work out. Effectively What I want is user should not be able to close the chip. The select box gets disabled but not the chip. attaching formated code for better understanding.

[RolandHeath]

@sharananiapurapu
Well, I'm not part of the team, just like to help out. I can think of two main ideas for a workaround, if you can't get it working.

The first would be using a custom chip template, like the 3rd "basic usage" example in the docs, but putting ng-disabled, ng-hide, or ng-if on the button element with the md-chip-remove.

The second idea would be using the using md-on-remove, and re-adding the chip as soon as it's removed (might have some other issues though...)

Sneaky option 3 would be to create a pull request with your own solution to the problem, but that's obviously more complicated.

[sharanainapurapu]

@RolandHeath
Like your approaches. Thank you so much for your suggestions.

[Kasahs]

@sharananiapurapu
A temporary hack for this if you just want to disable the input element:
.your-container .md-chips .md-chip-input-container > input { display: none; }
.your-container is for specificity and to make sure it doesn't happen to all chips.

[piyushchauhan2011]

@Kasahs yep works perfectly. Use .your-container to identify in which case you want to disable

[ThomasBurleson]

This issue is closed as part of our ‘Surge Focus on Material 2' efforts.
For details, see our forum posting @ http://bit.ly/1UhZyWs.

[kondalraodurgam]

ng-disabled in angularjs not working on angular material md-chips

[kondalraodurgam]

Its working or not???.

On Mon, Feb 20, 2017 at 5:33 PM, Kondal Durgam [e-mail]
wrote:

ng-disabled in angularjs not working on angular material md-chips

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
https://github.com/angular/material/issues/3464#issuecomment-281062214,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ATQ_QXv14BSk1vrxgGpk6ROnHIBPtL4vks5reYEYgaJpZM4FMFgh
.

[RudolfFrederiksen]

https://material.angularjs.org/1.1.1/api/directive/mdChips
there is a readonly parameter on md-chips directive that does just the same thing.

[kondalraodurgam]

Thank you#rudoifFrederiksen

[Syedgit]

is there any feasable solution yet to make it work with angular ng-disabled , i tried readonly attribute but does not work me.

<div layout="row" layout-margin>
          <md-input-container flex="100" class="notifyUser-chips">
            <label>Bcc</label>
            <br>
            <md-chips flex="100"
                      ng-model="notifyCtrl.bcc"
                      name="email"
                      readonly="true">
            </md-chips>
            <p style="color:red" ng-show="patternError">An email must contain a-z, A-Z, 0-9, or _ characters</p>
          </md-input-container>
        </div>