javascript - angular js不发布表格

Question

这是html

<form name="vm.hotelForm" ng-submit="vm.addHotel()">
    Hotel name: <input type="text" name="name" required ng-minlength="2" ng-model="vm.name">
      <div ng-show="vm.hotelForm.name.$dirty && vm.hotelForm.name.$invalid && vm.isSubmitted">
        <p>Name should be more than 2 characters long</p>
      </div>

    Hotel address: <input type="text" name="address" required ng-minlength="2" ng-model="vm.address">
      <div ng-show="vm.hotelForm.address.$dirty && vm.hotelForm.address.$invalid && vm.isSubmitted">
        <p>add services</p>
      </div>

    Your stars: <input type="number" name="stars" required ng-pattern="/^[1-5]$/" ng-model="vm.stars">
      <div ng-show="vm.hotelForm.stars.$dirty && vm.hotelForm.stars.$invalid && vm.isSubmitted">
        <p>Rating must be between 1-5.</p>
        </div>

    Your services: <textarea name="services" required ng-model="vm.services"></textarea>

     Your Description: <textarea name="desc" required ng-model="vm.desc"></textarea>
      <div ng-show="vm.hotelForm.desc.$dirty && vm.hotelForm.desc.$invalid && vm.isSubmitted">
        <p>Please add a description</p>
      </div>

    Your photos: <input type="text" name="photos" ng-model="vm.photos">
        <p>photos</p>
      </div>

    Your currency: <input type="number" name="currecy" ng-model="vm.currency">
      <div ng-show="vm.hotelForm.currency.$dirty && vm.hotelForm.currency.$invalid && vm.isSubmitted">
        <p>Add currency.</p>
        </div>

    Your lat:
<input type="number" name="myDecimal" placeholder="Decimal" ng-model="vm.lat" ng-pattern="/^[0-9]+(\.[0-9]{1,2})?$/" step="0.01" />
      <div ng-show="vm.hotelForm.lat.$dirty && vm.hotelForm.lat.$invalid && vm.isSubmitted">
        <p>Add lat.</p> 
    </div>

    Your lang: 
<input type="number" name="myDecimal" placeholder="Decimal" ng-model="vm.lng" ng-pattern="/^[0-9]+(\.[0-9]{1,2})?$/" step="0.01" />
      <div ng-show="vm.hotelForm.lang.$dirty && vm.hotelForm.lang.$invalid && vm.isSubmitted">
        <p>Add lang.</p>
        </div>

  <button type="submit" class="btn">Add review</button>
</form>

和 Angular Controller

function HotelsController($route, $routeParams, hotelDataFactory) {
  var vm = this;
  vm.title = 'MEAN Hotel App';
    vm.isSubmitted = false;
  hotelDataFactory.hotelList().then(function(response) {
    // console.log(response);
    vm.hotels = response.data;
  });

vm.addHotel = function(){
    var postHotelData = {
        name: vm.name,
        address: vm.address,
        stars: vm.stars,
        services: vm.services,
        Description: vm.desc,   
        photos:vm.photos,
        currency:vm.currency,
        lat:vm.lat,
        lng:vm.lng
};
if (vm.hotelForm.$valid) {
      hotelDataFactory.postHotel(postHotelData).then(function(response) {
        if (response.status === 200) {
          $route.reload();
        }
      }).catch(function(error) {
        console.log(error);
      });
    } else {
      vm.isSubmitted = true;
    }
}
}

http服务

function hotelDataFactory($http) {
  return {
    hotelList: hotelList,
    hotelDisplay: hotelDisplay,
    postReview: postReview,
    postHotel: postHotel
  };

  function hotelList() {
    return $http.get('/api/hotels').then(complete).catch(failed);
  }

  function hotelDisplay(id) {
    return $http.get('/api/hotels/' + id).then(complete).catch(failed);
  }

  function postReview(id, review) {
    return $http.post('/api/hotels/' + id + '/reviews', JSON.stringify(review)).then(complete).catch(failed);
  }

function postHotel(hotel) {
    return $http.post('/api/hotels/', JSON.stringify(hotel)).then(complete).catch(failed);
  }

  function complete(response) {
    return response;
  }

  function failed(error) {
    console.log(error.statusText);
  }

}

和 mongoose-express 脚本

module.exports.hotelsAddOne = function(req, res) {
  console.log("POST new hotel");

  Hotel
    .create({
      name : req.body.name,
      description : req.body.description,
      stars : parseInt(req.body.stars,10),
      services : _splitArray(req.body.services),
      photos : _splitArray(req.body.photos),
      currency : req.body.currency,
      location : {
        address : req.body.address,
        coordinates : [parseFloat(req.body.lng), parseFloat(req.body.lat)]
      }
    }, function(err, hotel) {
      if (err) {
        console.log("Error creating hotel");
        res
          .status(400)
          .json(err);
      } else {
        console.log("Hotel created!", hotel);
        res
          .status(201)
          .json(hotel);
      }
    });

};

问题是表单甚至没有抛出错误，我故意犯了错误，但添加按钮仍然没有做任何事情。

我认为这可能是方案中的问题，但我已经明确表示仍然没有错误，而不是按钮只是处于非事件状态。请帮忙解释一下谢谢!...

Answer 1

点击是否进入了提交功能？如果不是那么，我认为 html5 验证正在启动。在 <form> 上尝试 novalidate="novalidate"