angularjsangularjs-model

Preserve empty field in model with Angular


If I have an angular form like this

<form name="myForm">
  <input type="text" required ng-model="field1" />
  <input type="text" ng-model="field2" />
</form>

When I access the model it will only hold those fields that have values so if both fields have values json will be {"field1":"value1","field2":"value2"}. If only field1 is has a value json will be {"field1":"value1"}. Can I instruct Angular to keep empty fields in the model with null values?

UPDATE:

My controller looks like below. I'm loading the data as json from the server. When the data comes from the server I get this {"field1":"value1","field2":"value2"} but when saveContent is run and only field1 has a value the server gets this {"field1":"value1"}.

var myApp = angular.module('myApp', []);
myApp.controller('contentEditController', ['$scope', '$http',
  function ($scope, $http) {

      $scope.saveContent = function () {
          $http.post("/api/ContentData", $scope.formdata);
      };

      $scope.loadContent = function (contentId) {
          $http.get("/api/ContentData/" + contentId)
              .success(function (response) {
                  $scope.formdata = response;
               });
      }

  }]);

So fields that had values when they came from the server don't get sent back as empty.

-Mathias


Solution

  • Initialize the values on the scope in the controller,

    .controller('formcontroller', [ '$scope', function($scope){
      $scope.field1 = "";
      $scope.field2 = "";
    })];