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功能当whenvalidateForm为true时调用create event function

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

像这样......

如果为false，表单验证将清除所有字段

1 个答案: