ng-grid issue with <input> template

Question

I have the following ng-grid definition:

$scope.gridActivities = {
    data: 'activities'
    , multiSelect: false
    , columnDefs: [
        { field: 'ID', displayName: 'ID', visible: false },
        { field: 'AppliedWorkType.WorkType.Name', displayName: 'Type' },
        { field: 'CreatedOn', displayName: 'Date', cellFilter: 'date:\'MM/dd/yyyy\'' },
        { field: 'NonBillableHours', displayName: 'Unbilled Hours' },
        { field: 'BillableHours', displayName: 'Billed Hours', cellTemplate: '<input type="number" class="form-control" ng-pattern="/^\d{0,9}(\.\d{1,9})?$/" ng-model="row.entity.BillableHours"/>' }
    ]
}

As activities is loaded and displayed by default, the input correctly has the proper values inside of BillableHours and I can see them in the input box. However, when I change the value (from say 5 to 6) and then I look at the activity by debugging and looking at $scope, the activity.BillableHours has switched to undefined.

I'm using a similar method to something I've already gotten working with checkboxes:

{ field: 'ApprovalAuthority', displayName: 'Approval Authority', cellTemplate: '<input class="control-label" style="margin-top: 8px;margin-left: 8px" type="checkbox" ng-model="row.entity.ApprovalAuthority" />' }

Why is this working for checkboxes but not for textboxes?

Answer 1

You forgot to escape the '\' character in your ng-pattern

Just change ng-pattern="/^\d{0,9}(\.\d{1,9})?$/" to ng-pattern="/^\\d{0,9}(\\.\\d{1,9})?$/"

Here's a working plunker