How to submit angular material chips as array when particular form submission?

Question

I want to submit below form as json object like this:

object { id:1, version:0, roomNo:1, availability:"available", facility:{'a', 'b', 'c', 'd'} }

My form image as follows

angular material chips form image

<div flex="10" id="lenth">
    <div ng-controller="roomController as controller" ng-cloak="" class="inputdemoErrors">
        <div class="card">

            <form  ng-submit="controller.submit()" name="roomForm" >

                <input type="hidden" ng-value="roomDTO.id" ng-model="roomDTO.id" />
                <input type="hidden" ng-value="roomDTO.version" ng-model="roomDTO.version" />
                <md-toolbar class="md-hue-2" ><div class="md-toolbar-tools"><span>{{roomHomeTitle}}</span></div></md-toolbar>
                <div id="formBody">
                    <md-input-container class="md-block">
                        <label>Room no</label>
                        <input type="text" md-maxlength="30" required="" md-no-asterisk="" name="roomNo" ng-value="roomDTO.roomNo"  ng-model="roomDTO.roomNo"> 
                    </md-input-container>
                    <md-input-container class="md-block">
                        <label>Availability</label>
                        <input  type="text" md-maxlength="50" required="" md-no-asterisk="" name="availability" ng-value="roomDTO.isAvailable" ng-model="roomDTO.isAvailable">
                    <md-input-container class="md-block" ng-init="controller.getAllFacilitiesForRoom()">
                   <lable> Room Facility</lable>
                           <md-chips class="custom-chips" ng-model="controller.facilityList" readonly="controller.readonly" md-removable="controller.removable" >
                               <input type="hidden"  ng-model={{$chip.id}}>
                               <md-chip-template>

                                   <strong>{{$chip.facilityName}}</strong>

                           </md-chip-template></md-chips>
                    </md-input-container>

                    <div align="right">
                        <md-input-container class="md-block">
                            <div layout="row">

                                <md-button type="reset" md-no-ink class="md-warn" >&#10160; Reset </md-button>
                                <md-button type="submit" md-no-ink class="md-primary">&#10004;Create  </md-button>
                            </div>
                        </md-input-container>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

Answer 1

There are several ways for approach this problem. here I mentioned simple and general approach to catch the selected chips from the controller.

yourHTMLPage.html

<md-input-container class="md-block" ng-init="yourCtrl.getValueList()"> 
        <md-chips 
        multiple="true" md-no-cache="true" readonly="readOnly" ng-model="yourCtrl.bindValue"
            md-on-select="yourCtrl.selectedChips($chip)"
            md-on-remove="yourCtrl.deleteChips($chip)" > 
             <md-chip-template>
                <strong >{{$chip.para1}}</strong> 
             </md-chip-template>
    </md-input-container>

controller.js

 vm.selectedChips=function(chip){
    console.log(chip);
    vm.yourDTO.youtList.push(chip); 
    // vm.yourList.push(chip);
 }; 



vm.deleteChips=function(chip){
   console.log(chip);
   vm.deleteFaciltyList.push(chip);
};