ng-model 值必须是日期对象

Question

我正在用 angularjs 材料构建一个 CRUD 应用程序。所以当我想添加一个新用户时，生日输入必须是<md-datepicker> 标签。

<md-datepicker ng-model="add.user.BirthDate" md-placeholder="Enter date"></md-datepicker>

这是 HTML 标签。

但是当我想编辑用户时，会出现模型必须是日期的错误

<md-datepicker ng-model="edit.user.BirthDate" md-placeholder="Enter date"></md-datepicker>

这是用于编辑，我在对话框中调用该功能，因为必须有用户的更新

////EDIT USER

//POP UP
$scope.showEdit = function (ev, user) {
 $mdDialog.show({
    controller: SampleController,
    templateUrl: 'app/main/sample/edit.tmpl.html',
    parent: angular.element(document.body),
    targetEvent: ev,
    clickOutsideToClose: true,
    fullscreen: $scope.customFullscreen,
    locals: {
      user: user,
      //map: map,
      editUser: editUser
    },
    bindToController: true,
    controllerAs: 'edit'
  });


  //FUNC
  function editUser() {



    $http({
      method: 'PUT',
      url: 'http://192.168.23.65/DetyreAPI/api/Client/UpdateClient',
      data: {
        FirstName: user.FirstName,
        LastName: user.LastName,
        BirthDate: user.BirthDate,
        Address: user.Address,
        Latitude: user.Latitude,
        Longitude: user.Longitude
      },

      headers: {
        'Content-Type': 'application/json'
      }


    }).then(function successCallback(response) {

      $mdDialog.hide();
      $scope.showUpdateAlert_Success();


    }, function errorCallback(response) {
      $mdDialog.hide();
      $scope.showUpdateAlert_Error();
    });
  }



}

还有添加新用户的功能和对话框

///ADD NEW USER

//POP UP
$scope.showAdd = function (ev, user) {

  $mdDialog.show({
    controller: SampleController,
    templateUrl: 'app/main/sample/add.tmpl.html',
    parent: angular.element(document.body),
    targetEvent: ev,
    clickOutsideToClose: true,
    fullscreen: $scope.customFullscreen,
    locals: {
      user: user,
      addUser: addUser
    },
    bindToController: true,
    controllerAs: 'add'
  });
}

//FUNC
function addUser(value) {



  $scope.user = {

  };




  $http({

    method: 'POST',
    url: 'http://192.168.23.65/DetyreAPI/api/Client/AddClient',
    data: value,
    headers: {
      'Content-Type': 'application/json'
    }


  }).then(function successCallback(response) {

    console.log(response.data);
    if (response.data.message === 'Ju shtuat nje kontakt me sukses!') {
      $scope.showData($scope.user);
      $mdDialog.hide();
      $scope.showAddAlert_Success();
    } else {
      $scope.showAddAlert_Error();
    }

  }, function errorCallback(response) {
    $mdDialog.hide();
    $scope.showAddAlert_Error();
  });

}

Answer 1

问题在于您的add.user.BirthDate 模型不是有效的日期对象。您的模型值为：1999-01-01 而有效的 日期对象 看起来像这样

Fri Sep 21 2018 15:06:23 GMT+0200 (Midden-Europese zomertijd)

所以要将您的模型转换为有效的日期对象，您可以执行以下操作。

创建一个自定义指令，它将日期转换为 日期对象

.directive('mdDatepicker', function () {
  function link(scope, element, attrs, ngModel) {

    // This will format the model
    ngModel.$parsers.push(function(valueFromInput) {

      // Format displayed value in timestamp format and store it to ngModel
      return new Date(valueFromInput);
    });
  }
  return {
    require: 'ngModel',
    link: link,
    restrict: 'EA',
    priority: 1
  }
});