javascript - Bind hidden inputs to model in angular

Question

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.

Answer 1

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>