CODEWITHSUNDEEP
angularjsangular-ui
Shaw Levin
Shaw Levin

Reputation: 195

How to see both masked and unmasked values with AngularUI ui-mask and ng-repeat?

I'm using AngularUI's ui-mask directive to mask phone numbers. We'd like to save both the masked and unmasked value to the database.

I see the docs have the option to use the model-view-value="true" to store the $viewValue as the model giving us the masked value.

However since we'd like both I'd prefer a way to leave this false and access the $viewValue on my own. I see in the demo however this is for a single input. It looks like it is bound to the name of the inputs.

My issue is this is a ng-repeat and so the names vary. I got it working for a single item (you can see in the first table it works).

The last <td> is where I'm trying to show the $viewValue. I'm also trying to pass it in to the setPhoneValue function but it is undefined there also.

Edit: Created a fiddle: https://jsfiddle.net/n35u7ncz/

<form name="phone_form" id="crm_phonegrid" ng-app="crm_phonegrid" ng-controller="phoneCtrl">
    <table cellpadding="2">
        <tr>
            <td><input type="text" name="new_phone" placeholder="Number" ng-model="addNumber.phoneNumber" onfocus="onFocusUpdateMask()" ui-mask="{{mask}}" ui-mask-placeholder ui-mask-placeholder-char="_" /></td>
            <td><select name="phoneTypeSelect" ng-model="addNumber.phoneType" ng-options="option.name for option in phoneTypeOptions track by option.Value"></select></td>
            <td><input type="button" ng-click="addNumber()" value="Add" /></td>
            <td>{{phone_form.new_phone.$viewValue}}</td>
            <td>{{addNumber.phoneNumber}}</td>
        </tr>
    </table>
    <table cellpadding="2">
        <thead>
            <tr>
                <th>Phone Link</th><th>Phone Number</th><th>Phone Type</th><th>Primary Flag</th><th>Mask</th><th>View</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="number in numbers">
                <td><a style="color:#1160B7;text-underline-position:below" href="" ng-click="openPhoneRecord(number)">{{ number.crm_phonenumber }}</a></td>
                <td><input type="text" id="crm_phonegrid_number" name="phone_number_input" model-view-value="true" ng-model="number.crm_phonenumber" ng-change="setPhoneValue(number)" ui-mask="{{number.crm_crm_country_crm_phonenumber.crm_PhoneMask}}" ui-mask-placeholder ui-mask-placeholder-char="_" /></td>
                <td><select name="phoneTypeSelect" ng-model="number.crm_phonetypecode" ng-change="setValue(number)" ng-options="option.name for option in phoneTypeOptions track by option.Value"></select></td>
                <td><input type="radio" name="primary" id="primaryRadio" ng-checked="number.crm_isprimary" ng-model="number.crm_isprimary" ng-change="setValue(number)" ng-value="number.crm_isprimary" ng-click="setFlag(number)" /></td>
                <td>{{number.crm_crm_country_crm_phonenumber.crm_PhoneMask}}</td>
                <td>View: {{phone_form.phone_number_input.$viewValue}}</td>
            </tr>
        </tbody>
    </table>
</form>

Upvotes: 0

Views: 1968

Answers (1)

Shaw Levin
Shaw Levin

Reputation: 195

We got this working. The trick was to use the $index to generate a unique Id for the element and then pass that to the controller.

I've updated the fiddle here: https://jsfiddle.net/n35u7ncz/3/

The general idea is that the input field needs to be tagged and have an ng-change:

<input type="text" id="phone_input_id" name="phone_input_name_{{$index}}" ng-model="number.crm_phonenumber" ng-change="setValue(number, $index)" ui-mask="{{number.crm_crm_country_crm_phonenumber.crm_PhoneMask}}" ui-mask-placeholder ui-mask-placeholder-char="_" />

And then:

      $scope.setValue = function(item, index)
      {
        item.crm_phonenumbermasked = $scope.phone_form["phone_input_name_" + index].$viewValue;
      }

Upvotes: 0

Related Questions