How to disable angular material component md-chips?

Question

I have read angular material documentation and they have readonly attribute to disable the element. But I can't get it to work, is there any other Angular Material approach that I can use? I want to disabled element by default. main.html

<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>

Do you get a JS error? When I've tried this in my app, I got an exception with this text: " can only have *one* , or <md-select> child element!"</md-select> — molnarg, Dec 02 '19 at 11:49

score 0 · Answer 1 · answered May 17 '17 at 14:06

I replicated your code in this fiddle, for me it's working fine.

<div ng-app="myApp">
  <div ng-controller="MyCtrl">
    <div layout="column" layout-margin>
        Readonly
        <md-chips ng-model="bcc"
                  name="email"
                  readonly="true">
        </md-chips>

        Not readonly
        <md-chips ng-model="bcc"
                  name="email">
        </md-chips>
    </div>
  </div>
</div>

var myApp = angular.module('myApp',['ngMaterial']);

myApp.controller("MyCtrl", ["$scope","$rootScope", function($scope,$rootScope){
      $scope.bcc = ['Broccoli','Cabbage','Carrot'];
   }
]);

Check your angular-material and angular versions.

@hussain Not really, md-chips only have the attribute readonly. — Gustavo Gabriel, May 17 '17 at 14:12

score 0 · Answer 2 · answered May 17 '17 at 14:33

If you have ng-model, angular-material will always treat them as editable.Also in docs says If no ng-model is provided, the chips will automatically be marked as readonly https://material.angularjs.org/latest/api/directive/mdChips.

So here is the fix...

<md-chips flex="100">
    <md-chip ng-repeat="chip in notifyCtrl.bcc"
             name="email"
             readonly="true">{{chip}}
    </md-chip>
 </md-chips>

How to disable angular material component md-chips?

2 Answers2