Проверка формы очищает все поля, если ложь

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>

Вызов функции JS создать функцию события, когда trueidateForm имеет значение true

$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();
  }

Попробуйте это и дайте мне знать, если это работает..

//////// РЕДАКТИРОВАТЬ 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);
      });
   }
};

Что-то вроде этого..