表單驗證會清除所有字段，如果為false

Question

我的表單有一個簡單的表單驗證功能，其中包含兩個文本字段和兩個下拉字段。 如果我不填寫任何字段，它將提醒我，但它將刪除所有其他字段中的信息，並仍提交表單。 如何解決此問題？ 我知道這可能與表單提交按鈕中的ng-click函數有關，但是我無法找到解決方案。

（1）javascript文件中的控制器

 function initMap(data) { var uluru = {lat: 29.643220, lng: -82.350427}; var map = new google.maps.Map(document.getElementById('map'), { zoom: 14, center: uluru }); // Marker Images var image = 'https://image.ibb.co/nmGCo5/Spot3.png'; var image3 = 'http://www.poolcleaningfl.com/wp-content/uploads/2014/11/map_icon.png'; placeMarker(data, map); } function mainController($scope, $http) { $scope.formData = {}; $http.get('/api/events') .success(function(data) { $scope.events = data; initMap(data); for(i = 0; i < data.length; i++) { console.log(data[i].eventLocation); } }) .error(function(data) { console.log('Error: ' + data); }); // when submitting the add form, send the text to the node API $scope.createEvent = function() { $http.post('/api/events', $scope.formData) .success(function(data) { $scope.formData = {}; // clear the form so our user is ready to enter another $scope.events = data; console.log(data); }) .error(function(data) { console.log('Error: ' + data); }); }; // if a field is left empty, sent alert, return false $scope.validateForm = function() { if (!$scope.formData.eventName) { alert("Please give your event a name!"); return false; } else if (!$scope.formData.eventType) { alert("Please choose an event type!"); return false; } else if (!$scope.formData.eventLocation) { alert("Please choose a location!"); return false; } else if (!$scope.formData.eventDetails) { alert("Please include some details about your event!"); return false; } return true; } } 

（2）html文件中的表格

 <!-- Event form --> <div class="col-md-6"> <form name="myFor" ng-submit="validateForm()"> <!-- Event name --> <div class="form-group"> <label class="styleone">Event Name</label> <input type="text" class="form-control" ng-model="formData.eventName" placeholder="Event name"> </div> <!-- Event type --> <div class="form-group"> <label class="styleone">Type</label> <select class="form-control selectpicker" ng-model="formData.eventType"> <option>Type 1</option> <option>Type 2</option> <option>Type 3</option> </select> </div> <!-- Event location --> <div class="form-group"> <label class="styleone">Location</label> <select class="form-control selectpicker" data-live-search="true" ng-model="formData.eventLocation"> <option>Option 1</option> <option>Option 2</option> <option>Option 3</option> </select> </div> <!-- Event details --> <div class="form-group"> <label class="styleone">Event Details</label> <textarea class="form-control" ng-model="formData.eventDetails" rows="2" placeholder="Add details about your event"></textarea> </div> <div class="text-center"> <button class="btn btn-info" ng-click="createEvent()">Submit</button> </div> </form> 

Answer 1

好吧，你可以做到這一點。HTML代碼更改提交按鈕到此

      <div class="text-center">
        <button class="btn btn-info"  type="submit">Submit</button>
      </div>

validateForm為true時，JS函數調用創建事件函數

$scope.validateForm = function() {
    if (!$scope.formData.eventName) {
      alert("Please give your event a name!");
      return false;
    }
    else if (!$scope.formData.eventType) {
      alert("Please choose an event type!");
      return false;
    }
    else if (!$scope.formData.eventLocation) {
      alert("Please choose a location!");
      return false;
    }
    else if (!$scope.formData.eventDetails) {
      alert("Please include some details about your event!");
      return false;
    }
    $scope.createEvent();
  }

試試這個，讓我知道它是否有效。

//////// EDIT 2 ///////////////////////

$scope.createEvent = function() {
  if($scope.validatForm()){
    $http.post('/api/events', $scope.formData)
      .success(function(data) {
        $scope.formData = {}; // clear the form so our user is ready to enter another
        $scope.events = data;
        console.log(data);
      })
      .error(function(data) {
        console.log('Error: ' + data);
      });
   }
};

像這樣