Formular Senden konnte nicht mit angularjs und Bootstrap Datetime Picker

Question

Ich versuche, einen Beitrag zu tun und ganz einfach Name und eine Datetime mit einem Bootstrap datetimepicker hinzufügen. Wenn ich datetime und hit addiere, passiert nichts. Wenn ich jedoch das Feld eintippe und auf Hinzufügen klicke, wird es trotzdem gesendet. Ich habe viel über benutzerdefinierte Anweisungen für dieses Projekt gelesen, aber ich kann nur nicht in der Lage sein, irgendwelche von ihnen zum Laufen zu bringen, also dachte ich, dass ich nur meinen Code teilen würde.

Index.cshtml

<div class="wrapper wrapper-content animated fadeInRight"> 
     <div class="row"> 
      <div class="col-lg-12"> 
       <div class="ibox float-e-margins"> 
        <div class="ibox-title"> 
         <h5>Create Content Files</h5> 
        </div> 
        <!--Start Form --> 
        <div class="ibox-content"> 
         <div class="form-horizontal" role="form" name="addcontentFileform"> 
          <div class="form-group"> 
           <label for="title" class="col-sm-2 control-label">File Name</label> 
           <div class="col-sm-10"> 
            <input type="text" data-ng-model="contentFile.FileName" class="form-control" id="title" placeholder="Your File Name" required title="Enter your File Name" /> 
           </div> 
          </div> 

          <div class="form-group"> 
           <label for="title" class="col-sm-2 control-label">Publish Date</label> 
           <div class="col-sm-10"> 
            <div class="input-group date"> 
             <span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span> 
             <input type="text" class="form-control datetimepicker" id="datetimepicker" data-ng-model="contentFile.PublishDate" /> 
             <span class="glyphicon form-control-feedback"></span> 
            </div> 
           </div> 
          </div> 

          <div class="form-group"> 
           <div class="col-sm-offset-2 col-sm-10"> 
            <span data-ng-hide="editMode"> 
             <input type="submit" value="Add" ng-disabled="addcontentFileform.$invalid" data-ng-click="add()" class="btn btn-primary" /> 
            </span> 
            <span data-ng-show="editMode"> 
             <input type="submit" value="Update" ng-disabled="addcontentFileform.$invalid" data-ng-click="update()" class="btn btn-primary" /> 
            </span> 
           </div> 
          </div> 
          <!-- Start form Buttons --> 
          <div class="form-group"> 
           <div class="modal-footer"> 
            <button type="button" class="btn btn-default" data-ng-click="closeAddUpdate()">Cancel</button> 
           </div> 
          </div> 
          <!-- End form Buttons --> 
         </div> 
        </div> 
        <!--End Form --> 
       </div> 
      </div> 
     </div> 
    </div> 

Ich rufe die Bootstrap-Plugins und Controller auf der Seite wie erwartet.

contentFile.controller.js

var app = angular.module('contentFileApp', []); 
var baseAddress = 'http://localhost:63271/api/ApiContentFile/'; 
var url = ""; 

app.factory('contentFileFactory', function ($http) { 
return { 
    getContentFilesList: function() { 
     url = baseAddress + "GetContentFilesList"; 
     return $http.get(url); 
    }, 
    getContentFile: function (contentFile) { 
     url = baseAddress + "GetContentFile/" + contentFile.Id; 
     return $http.get(url); 
    }, 
    addContentFile: function (contentFile) { 
     url = baseAddress + "Post"; 
     return $http.post(url, contentFile); 
    }, 
    updateContentFile: function (contentFile) { 
     url = baseAddress + "Put/" + contentFile.Id; 
     return $http.put(url, contentFile); 
    }, 
    deleteContentFile: function (contentFile) { 
     url = baseAddress + "DeleteContentFile/" + contentFile.Id; 
     return $http.delete(url); 
    } 
}; 
}); 
app.controller('contentFileController', function PostController($scope, contentFileFactory) { 
$scope.contentFiles = []; 
$scope.contentFile = null; 
$scope.editMode = false; 

//get ContentFile 
$scope.get = function() { 
    $scope.contentFile = this.contentFile; 
    $('#viewModal').toggle('show'); 
    $('#fullModal').toggle('hide'); 
}; 

//get all ContentFiles 
$scope.getAll = function() { 
    contentFileFactory.getContentFilesList().success(function (data) { 
     $scope.contentFiles = data 
     //$('#fullModal').toggle('show'); 
     $('#viewModal').toggle('hide'); 
     $('#contentFileModel').toggle('hide'); 
     $('#confirmModal').toggle('hide'); 
    }).error(function (data) { 
     $scope.error = "An Error has occured while Loading contentFiles! " + data.ExceptionMessage; 
    }); 
}; 

// add ContentFile 
$scope.add = function() { 
    var currentContentFile = this.contentFile; 
    //if (currentContentFile != null && currentContentFile.FileName != null && currentContentFile.PublishDate && currentContentFile.PhotoURL && currentContentFile.IsOwned && currentContentFile.FileLink && currentContentFile.Description) 
    if (currentContentFile != null && currentContentFile.FileName != null && currentContentFile.PublishDate) { 
     contentFileFactory.addContentFile(currentContentFile).success(function (data) { 
      $scope.addMode = false; 
      currentContentFile.Id = data; 
      $scope.contentFiles.push(currentContentFile); 

      //reset form 
      $scope.contentFile = null; 
      // $scope.addcontentFileform.$setPristine(); //for form reset 

      $('#contentFileModel').modal('hide'); 
      $('#fullModal').toggle('show'); 
     }).error(function (data) { 
      $scope.error = "An Error has occured while Adding contentFile! " + data.ExceptionMessage; 
     }); 
    } 
}; 

//edit contentFile 
$scope.edit = function() { 
    $scope.contentFile = this.contentFile; 
    $scope.editMode = true; 
    $('#contentFileModel').toggle('show'); 
    $('#fullModal').toggle('hide'); 
}; 

//update contentFile 
$scope.update = function() { 
    var currentContentFile = this.contentFile; 
    contentFileFactory.updateContentFile(currentContentFile).success(function (data) { 
     currentContentFile.editMode = false; 

     $('#contentFileModel').toggle('hide'); 
     $('#fullModal').toggle('show'); 
    }).error(function (data) { 
     $scope.error = "An Error has occured while Updating contentFile! " + data.ExceptionMessage; 
    }); 
}; 

// delete ContentFile 
$scope.delete = function() { 
    currentContentFile = $scope.contentFile; 
    contentFileFactory.deleteContentFile(currentContentFile).success(function (data) { 
     $('#confirmModal').toggle('hide'); 
     $('#fullModal').toggle('show'); 
     //$('#fullModal').toggle('hide'); 
     $scope.contentFiles.pop(currentContentFile); 

    }).error(function (data) { 
     $scope.error = "An Error has occured while Deleting contentFile! " + data.ExceptionMessage; 

     $('#confirmModal').toggle('hide'); 
    }); 
}; 

//Model popup events 
$scope.showadd = function() { 
    $scope.contentFile = null; 
    $scope.editMode = false; 
    $('#contentFileModel').toggle('show'); 
    $('#fullModal').toggle('hide'); 
}; 

$scope.showedit = function() { 
    $('#contentFileModel').toggle('show'); 
    $('#fullModal').toggle('hide'); 
}; 

$scope.showconfirm = function (data) { 
    $scope.contentFile = data; 
    $('#confirmModal').toggle('show'); 
    $('#fullModal').toggle('hide'); 
}; 

$scope.cancel = function() { 
    $scope.contentFile = null; 
    $('#confirmModal').toggle('hide'); 
    $('#fullModal').toggle('show'); 
} 

$scope.closeDetails = function() { 
    $scope.contentFile = null; 
    $('#viewModal').toggle('hide'); 
    $('#fullModal').toggle('show'); 
} 
$scope.closeAddUpdate = function() { 
    $scope.contentFile = null; 
    $('#contentFileModel').toggle('hide'); 
    $('#fullModal').toggle('show'); 
} 
$scope.closeDelete = function() { 
    $scope.contentFile = null; 
    $('#confirmModal').toggle('hide'); 
    $('#fullModal').toggle('show'); 
} 

//initialize your contentFiles data 
$scope.getAll(); 
}); 

Sorry über die Unordnung und Unsauberkeit, ich bin nur wirklich gespannt, wie mit all dies funktioniert, und was ich vielleicht

bearbeiten falsch machen werden: Es scheint, dass das contentFile.PublishDate nicht an das Modell bindet, wenn ich auf die Schaltfläche zum Hinzufügen klicke

Answer 1

Ich habe es gefunden! in Ihrem Methode Erhaltenes Sie diese Zeile:

if (currentContentFile != null && 
    currentContentFile.FileName != null && 
    currentContentFile.PublishDate) 

PROBLEM: bevor Sie das Datumsfeld füllt, currentContentFile.PublishDate immer undefined und damit Sie blockieren halten sein wird, einen Wert an die von der Einstellung erstes Mal ... das ist auch, warum Sie „fixed“ durch einen Wert manuell

kurz Einfügen - ersetzen Sie die obige Aussage mit:

if (currentContentFile != null && 
    currentContentFile.FileName != null)