Bind hidden inputs to model in angular

angularjs, hidden-field, javascript

Solution

Having hidden form fields is not the Angular way. You don't need hidden fields at all, as the all the scope variables (which are not in the form) can be taken as hidden variables.

As for the solution, while submitting the form, just populate the object 'record' with 'user':

function SaveRecord(){
  $scope.record.usersId = $scope.user.userId;
  $scope.record.userNameId = $scope.user.userNameId;
  http.post(url, $scope.record);
}

As a side note, you do not need to mention your variable while calling the function:

<button ng-disabled="!frmInput.$valid" ng-click="saveRecord()">Accept</button>

Problem

I have following form: ``` <form name="frmInput"> <input type="hidden" ng-model="record.usersId" value="{{user.userId}}"/> <input type="hidden" ng-model="record.userNameId" value="{{user.userNameId}}"/> <label for="fileNo">AccountId</label> <input id="fileNo" ng-model="record.fileNo" required/> <label for="madeSad">MadeSad</label> <input id="madeSad" ng-model="record.madeSadNo" required/> <button ng-disabled="!frmInput.$valid" ng-click="SaveRecord(record)">Accept</button> </form> ``` I get `record.fileNo` and `record.madeSadNo` in `SaveRecord` function but i don't get `record.usersId` and `record.userNameId` in `SaveRecord` function. Where am i making mistake? values of hidden inputs are correct.

Original source