Question

我使用AngularJS和Bootstrap创建了一个表单，它还具有Angular的表单验证。现在我正在尝试将表单数据上传到Firebase。我已经尝试将ng-controllers添加到表单中，它会破坏验证和日期选择器。我尝试按照这篇文章（Submitting data from text box to Firebase not working）中的说明进行调整，并根据我的需要进行调整，但没有运气。有解决方案吗这是我的代码。

<!doctype html>
<html ng-app="form">
<head>
<script src="https://cdn.firebase.com/js/client/1.0.11/firebase.js"></script>
    <script src="https://cdn.firebase.com/v0/firebase.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.js"></script>
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.10.0.js"></script>
<script src="https://cdn.firebase.com/libs/angularfire/0.7.1/angularfire.min.js"></script>
<script src="js.js"></script>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
<link href="style.css" rel="stylesheet">

 </head>


   <body>

  <h2>Planning Your Next Rush Event?</h2>
  <h5> Describe Your Event Here!</h5>




  <form name="form" role="form" id="contact">

      <div class="control-group form-group" ng-class="{true: 'error'}[submitted && form.name.$invalid && form.name.$error.minlength]">

    <label 
    class="control-label" 
    for="name">Event Name</label>
    <div class="controls">
        <input class="form-control .col-md-8" id="eventname" type="text" name="name" ng-minlength="3" ng-model="name" required />
        <span class="help-inline" ng-show="submitted && form.name.$error.required">Required</span>
        <span class="help-inline" ng-show="submitted && form.name.$error.name">Invalid Name</span>
        <span class="help-inline" ng-show="submitted && form.name.$error.minlength">Needs at least 3 characters</span>
    </div>
</div>


<div class="control-group form-group" ng-class="{true: 'error'}[submitted && form.hostname.$invalid && form.name.$error.minlength]">
    <label class="control-label" for="hostname">Host Name</label>
    <div class="controls">
        <input class="form-control .col-md-8" type="text" id="hostname" name="hostname" ng-minlength="3" ng-model="user.name" required />
        <span class="help-inline" ng-show="submitted && form.hostname.$error.required">Required</span>
        <span class="help-inline" ng-show="submitted && form.hostname.$error.minlength">Name Must Contain At Least 3 Characters</span>
    </div>
</div>


    <div class="control-group form-group" ng-class="{true: 'error'}[submitted && form.desc.$invalid && form.desc.$error.minlength]">
    <label class="control-label" for="desc">Event Description</label>
    <div class="controls">
        <textarea  class="form-control .col-md-8" rows="4" type="text" name="desc" ng-minlength="10" ng-model="text" required ></textarea>
        <span class="help-inline" ng-show="submitted && form.desc.$error.required">Required</span>
        <span class="help-inline" ng-show="submitted && form.desc.$error.minlength">Needs at least 10 characters</span>
</div>
</div>

<div ng-controller="DatePicker" class="control-group" ng-class="{true: 'error'}[submitted && form.dateinput.$error.date]">

    <label 
    class="control-label" 
    for="dateinput">Event Date</label>
    <div class="controls form-group">

        <p class="input-group">
          <input class="form-control .col-md-8" type="date" datepicker-popup="{{format}}" name="dateinput" ng-model="value" is-open="opened" min="2014-04-30" max="'2015-06-22'" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" close-text="Close" required />

          <span class="input-group-btn">
            <button class="btn btn-default" ng-click="open($event)"><i class="glyphicon glyphicon-calendar"></i></button>
          </span>
        </p>
    </div>

        <span class="help-inline" ng-show="submitted && form.dateinput.$error.required">Required</span>
        <span class="help-inline" ng-show="submitted && form.dateinput.$error.date">Not Valid Date</span>
    </div>




 <div class="control-group form-group" ng-class="{true: 'error'} [submitted && form.time.$error.time]">

    <label 
    class="control-label" 
    for="time">Event Time</label>
    <div class="controls">

        <input class="form-control .col-md-8"type="time" name="time" 
   min="06:00" max="12:00" required />
        <span class="help-inline" ng-show="submitted && form.time.$error.required">Required</span>
        <span class="help-inline" ng-show="submitted && form.time.$error.time">Invalid Time</span>

</div>
</div>


<div class="control-group form-group" ng-class="{true: 'error'}[submitted && form.address.$invalid]">
    <label class="control-label" for="address">Address</label>
    <div class="controls">
        <input class="form-control .col-md-8" type="text" name="address" ng-model="textarea" required />
        <span class="help-inline" ng-show="submitted && form.address.$error.required">Required</span>
</div>
</div>


<button type="submit" class="btn btn-primary btn-large submit" ng-click="submitted=true">Submit</button>
 </form>

   </body>
  </html>

这是我的Javascript

 angular.module('form', ['ui.bootstrap']);
  function Controller($scope) {
$scope.master = {};

$scope.update = function(user) {
  $scope.master = angular.copy(user);
};

$scope.reset = function() {
  $scope.user = angular.copy($scope.master);
};

$scope.reset();
 };




 var DatePicker = function ($scope) {


 $scope.toggleMin = function() {
   $scope.minDate = ( $scope.minDate ) ? null : new Date();
  };
  $scope.toggleMin();

   $scope.open = function($event) {
   $event.preventDefault();
   $event.stopPropagation();

   $scope.opened = true;
   };

   $scope.dateOptions = {
   'year-format': "'yy'",
   'starting-day': 1
   };

   };



   var url = "https://shekinah.firebaseio.com";
   var firebaseRef = new Firebase(url);

  function funct1(event)
  {
   var name = $("#eventname").val();
   var eventhost = $("#hostname").val();
   var date = Date();
   firebaseRef.push({Name: name, Eventhost: eventhost, Date: date});
   event.preventDefault();
    }


  $("#contact").submit();

Answer 1

我同意@Kato：按钮没有运行任何内容。还有几件事需要考虑，

删除任何jQuery，因为它不能与AngularJS合作
检查AngularFire的$add()方法，以便将数据保存到Firebase。

尝试将表单数据从Angularjs上传到Firebase不起作用

1 个答案: