0

I have this form (shown after page loads with Angular filled in data):

<div ng-controller="ItemsController">
<form name="Items" class="form-horizontal ng-dirty ng-valid-parse ng-valid ng-valid-required ng-submitted" ng-submit="submit()" _lpchecked="1">
    <input ng-model="item._token" name="_token" type="hidden" value="gej20f0RMOJypfL5n93Mon3QL6PjrrgWgZ20RnGe" class="ng-pristine ng-untouched ng-valid">
    <input ng-model="item.no_label" name="no_label" type="hidden" value="1" class="ng-pristine ng-untouched ng-valid">
    <fieldset>
        <legend>Add New Item</legend>

        <div class="form-group">
            <label class="col-md-2 control-label" for="sku">SKU</label>

            <div class="col-md-3">
                <input id="sku" name="sku" ng-model="item.sku" type="text" placeholder="Enter SKU" class="form-control input-md ng-dirty ng-valid-parse ng-valid ng-valid-required ng-touched" required="">

            </div>
        </div>

        <div class="form-group">
            <label class="col-md-2 control-label" for="Name">Name</label>

            <div class="col-md-5">
                <input id="name" name="name" ng-model="item.name" type="text" placeholder="Optional name" class="form-control input-md ng-valid ng-dirty ng-valid-parse ng-touched">

            </div>
        </div>

        <div class="form-group">
            <label class="col-md-2 control-label" for="add"></label>

            <div class="col-md-4">
                <button id="add" name="add" class="btn btn-success">
                    <i class="fa fa-plus"></i> Add
                </button>
                <button id="cancel" name="cancel" class="btn btn-danger">Cancel</button>
            </div>
        </div>

    </fieldset>
</form>
</div>

And this controller:

myApp.controller('ItemsController', ['$scope', '$http', function ($scope, $http) {
    $scope.item = {};
    $scope.submit = function () {
        if ($scope.validate()) {
            $http.post('/items/store', $scope.item)
                    .success(function (data) {
                        toastr['success']('Added ' + $scope.item.sku + ' to list.', 'Success!');
                        $scope.Items.$setPristine();
                        oTable.ajax.reload();
                    }).error(function (data) {
                        if ('error' in data)
                            toastr['error']('ERROR: ' + data['error'], 'Error!');
                        else
                            toastr['error'](JSON.stringify(data), 'Error!');
                    });
        }
    };
    $scope.validate = function () {
        return $.trim($scope.item.sku) != '';
    };
}]);

Everytime I submit this form, the data in $scope.item is missing item._token and item.no_label.

Why and how do I correct this?

2
  • I think these data are missing because of input type is hidden.
    – Ved
    Commented Feb 3, 2015 at 5:03
  • pass item from ng-submit="submit(item)" like this and use it inside your submit method..will solve your problem.. $scope.submit = function (item) {//you can use item model here}; Commented Feb 3, 2015 at 6:26

2 Answers 2

0

ng-model is used for two-way data binding. Since you are using hidden input elements, which can not be modified by or shown to users, there is no reason using ng-model. The less two-way binding, the better Perf would be.

So the best way to fix this issue is that add _token and no_label value to $scope.item in controller.

$scope.item = {
  _token: 'gej20f0RMOJypfL5n93Mon3QL6PjrrgWgZ20RnGe',
  no_label: 1
};

If you must add these elements in View, use one-way binding in View

<input name="_token" type="hidden" value="{{:: item._token}}" class="ng-pristine ng-untouched ng-valid">
<input name="no_label" type="hidden" value="{{:: item.no_label}}" class="ng-pristine ng-untouched ng-valid">

Check this pr to know more about how Angular guys think about data binding on hidden elements.

0

Instead of using the value attribute try using ng-value:

<input ng-model="item._token" name="_token" type="hidden" ng-value="gej20f0RMOJypfL5n93Mon3QL6PjrrgWgZ20RnGe" class="ng-pristine ng-untouched ng-valid">
<input ng-model="item.no_label" name="no_label" type="hidden" ng-value="1" class="ng-pristine ng-untouched ng-valid">

Another option is updating item like this:

$scope.item = {
  _token: 'gej20f0RMOJypfL5n93Mon3QL6PjrrgWgZ20RnGe',
  no_label: 1
};

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.