フォームの検証によって、偽の場合はすべてのフィールドがクリアされます

Question

2つのテキストフィールドと2つのドロップダウンフィールドで構成されるフォームの単純フォーム検証機能があります。私はフィールドを記入しないと私に警告しますが、他のすべてのフィールドから情報を削除してもフォームを提出します。この問題を解決するにはどうすればよいですか？私はおそらく私のフォーム送信ボタンのng-click機能と関係があると知っていますが、解決策を見つけることができませんでした。

htmlファイル内

（1）ジャバスクリプトファイル内

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）フォーム

<!-- 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機能 コール作成イベント関数真であるwhenvalidateForm

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

このような何か..