0

如果第一种形式有效，我会在第二种形式和第三种形式中隐藏一个 div。这个想法是，当您单击提交按钮时，如果这是有效的，则隐藏此元素。

<div class="cover" ng-hide ="form.shipping.$valid"/>

我还不太清楚这些情况下 Angular 的逻辑是如何工作的，如果有人可以给我一个想法，我将不胜感激。

以我的代码为例：

(function() {

  'use strict';


  var checkOut = angular
    .module('checkOutPageApp', [
      'ngResource',
      'ngAnimate',
      'ngMessages'
    ]);

  // Global controller
  checkOut.controller('globalCtrl', function($scope, $locale) {

    $scope.areaStatus = false;

    $scope.disabled = function() {
      if ($scope.shipping.$valid) {

        return true;

      } else {

        return false
      }
    }



  });

  // Controller for form Shipping address
  checkOut.controller('CheckoutShippingCtrl', ['$scope', '$http', '$location',
    function($scope, $http, $location) {
      this.data = {};
      var self = this;
      this.submit = function(valid) {
        $scope.areaStatus = false;
        if (!valid) {
          return;
        }

        self.submitting = true;

        $http.post('', self.data).then(function() {
          self.data = [];
          $location.path('/completed');
        }, function(response) {
          self.submitting = false;
        });
      };
    }
  ]);

}(window, window.angular));
<div class="modifyAddressShipping" ng-controller="CheckoutShippingCtrl as form">
  <form id="shipping" class="shipping" name="shipping" novalidate ng-submit="form.submit(shipping.$valid)" ng-class="{'loading': form.submitting, 'is-el-dirty' : shipping.$dirty || shipping.dirty}">
    <fieldset class="billing reset-style">
      <div id="shipping_address" class="group-items-form active">
        <div class="row collapse">
          <div class="row">
            <!-- / .items-form -->
            <div class="large-12 columns items-form">
              <label>
                <input class="field field-chk" type="text" name="name" placeholder="Name" ng-model="form.data.name" required/>
              </label>
              <div class="error" ng-if="shipping.$submitted || shipping.name.$touched" ng-messages="shipping.name.$error">
                <p class="text-msg" ng-message="required">You did not enter your name</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </fieldset>
    <div class="chk-box">
      <div class="large-24 column box-chk-btn chk-btn-sm">
        <button ng-click="areaStatus = !areaStatus" type="submit" class="chk-btn button-cta" data-ng-disabled="shipping.$invalid">
          Next
        </button>
      </div>
    </div>
  </form>
</div>

<div class="delivery-payment-card-chk">
  <form id="delivery_payment_form" novalidate name="formDelivery" class="min-h-3333" data-ng-submit="deliveryForm(formDelivery.$valid)">
    <fieldset class="billing reset-style">
      <div id="delivery_payment" class="group-items-form">

        <div class="large-24 column items-form">
          <label for="delivery1">
            <input name="delivery" type="radio" id="delivery1" checked>2nd Class Delivery</label>
          <label for="delivery2">
            <input name="delivery" type="radio" id="delivery2">Click & Collect</label>
          <label for="delivery3">
            <input name="delivery" type="radio" id="delivery3">48 Hour</label>
          <label for="delivery4">
            <input name="delivery" type="radio" id="delivery4">Next Working Day</label>
          <label for="delivery5">
            <input name="delivery" type="radio" id="delivery5">Saturday Courier Delivery</label>
          <!-- / label -->
        </div>
        <!-- / .items-form -->

      </div>
    </fieldset>
    <div class="chk-box">
      <div class="large-24 column box-chk-btn chk-btn-sm">
        <button class="chk-btn button-cta" data-ng-disabled="disabled">
          Next
        </button>
      </div>
    </div>
  </form>
</div>


<div class="sd-delivery-payment-card-chk" ng-controller="CheckoutPaymentCtrl as form">
  <form name="checkoutPayment" novalidate class="min-h-3333" ng-submit="form.submit(checkoutPayment.$valid)" ng-class="{loading:form.submitting}">
    <fieldset class="sd-billing reset-style">
      <div id="delivery_payment" class="sd-group-items-form">

        <div class="large-24 columns items-form">
          <label>
            <input class="sd-field field-chk" type="text" ng-disabled="disabled" name="name" placeholder="Name" ng-model="form.data.name" required></input>
          </label>
          <div class="error" ng-if="checkoutPayment.$submitted || checkoutPayment.name.$touched" ng-messages="checkoutPayment.name.$error">
            <p class="text-msg" ng-message="required">You did not enter your name</p>
          </div>
        </div>
        <!-- / .sd-items-form -->

        <div class="large-24 columns items-form">
          <label>
            <input type="text" id="card_number" name="cardnumber" card-data-type autocomplete="off" size="19" ng-minlength="15" maxlength="19" nd-disabled="" class="sd-field" placeholder="XXXX XXXX XXXX XXXX" ng-class="(form.data.cardnumber | checkcreditcard)" ng-model="form.data.cardnumber"
            required>
            <small class="checkCard" ng-class="(form.data.cardnumber | checkcreditcard)"></small>
          </label>
          <div class="error" ng-if="checkoutPayment.$submitted || checkoutPayment.cardnumber.$touched" ng-messages="checkoutPayment.cardnumber.$error">
            <p class="text-msg" ng-message="required">You did not enter your card number</p>
          </div>
        </div>
        <!-- / .sd-items-form -->

        <div class="large-6 columns items-form">
          <label>
            <input id="expiry_date" maxlength="5" name="datacard" card-data-expiration ng-disabled="" class="sd-field txt-center p-l-0" ng-model="form.data.datacard" type="text" type placeholder="MM / YY" required></input>
          </label>
          <div class="error" ng-if="checkoutPayment.$submitted || checkoutPayment.datacard.$touched" ng-messages="checkoutPayment.datacard.$error">
            <p class="text-msg" ng-message="required">Not valid date credit card</p>
          </div>
        </div>
        <!-- / .sd-items-form -->

        <div class="large-5 columns items-form">
          <label>
            <input name="cvv" class="sd-field txt-center p-l-0" ng-disabled="disabled" maxlength="4" ng-minlength="3" type="text" ng-pattern="/^[0-9]+$/" placeholder="CVV" ng-model="form.data.cvv" required></input>
          </label>
          <div class="error" ng-if="checkoutPayment.$submitted || checkoutPayment.cvv.$touched" ng-messages="checkoutPayment.cvv.$error">
            <p class="text-msg" ng-message="required">Security code required</p>
          </div>
          <div class="error" ng-show="checkoutPayment.cvv.$error.pattern">
            <p class="text-msg">Security code must contain only numbers</p>
          </div>
          <div class="error" ng-show="checkoutPayment.cvv.$error.minlength">
            <p class="text-msg">Security code must be 3-4 digits</p>
          </div>
        </div>
        <!-- / .sd-items-form -->
      </div>
</div>
</fieldset>
<div class="sd-chk-box">
  <div class="large-24 column box-chk-btn chk-btn-sm">
    <button type="submit" class="sd-chk-btn button-cta" ng-disabled="!checkoutPayment.$invalid">
      Place order
    </button>
  </div>
</div>
</form>
</div>

4

1 回答 1

1

仅当提交的表单是 $valid 时，才在按下提交按钮时隐藏表单。为了在控制器之间工作，我在 $rootScope 上创建了一个变量来标记表单是有效还是无效。使用 getter 和 setter 函数并将变量存储在服务中可能更正确。

索引.HTML

<!DOCTYPE html>
<html lang="en" ng-app="msgApp">

<head>
    <meta charset="utf-8"/>
</head>

<body ng-controller="MainCtrl">

    <div ng-show="form1Done" ng-hide="!form1Done">
      <h2>The Form has not disappeared</h2>
    </div>

    <div ng-show="!form1Done" ng-hide="form1Done">
      <h2>The Form</h2>
      <form name="userForm">
        <div class="field">
          <label for="userName">Enter your userName:</label>
          <input type="text" name="userName" ng-model="data.userName"
                 ng-minlength="5" ng-maxlength="30" required />
          <div ng-messages="userForm.userName.$error" ng-messages-multiple>
            <!-- the required message -->
            <div ng-message="required">Please enter username</div>
            <div ng-message="minlength">Username is too short</div>
            <div ng-message="maxlength">Username is too long</div>
            <div ng-message="userName">Error with username</div>
          </div>
        </div>
        <button type="submit" ng-click="clickBtn(userForm.$valid)">Submit</button>
      </form>  
    </div>

    <script src="http://code.angularjs.org/1.3.6/angular.js"></script>
    <script src="http://code.angularjs.org/1.3.6/angular-messages.js"></script>
    <script src="js/app.js"></script>
    <script src="js/controllers.js"></script>
</body>
</html>

APP.JS

angular.module('msgApp', ['ngMessages', 'msgApp.controllers'])

.run(function($rootScope) {
    $rootScope.form1Done = false;
});

控制器.JS

angular.module('msgApp.controllers', [] )

.controller('MainCtrl', function($scope, $rootScope) {

    $scope.clickBtn = function(form) {
        //valid form
        if(form == true) {
            console.log("Form is valid, $rootScope.form1Done= "+$rootScope.form1Done);
            $rootScope.form1Done = true;
        }

        //invalid form
        if(form == false) {
            $rootScope.form1Done = false;
            console.log("Form is invalid, $rootScope.form1Done= "+$rootScope.form1Done);
        }
    }
});
于 2014-12-13T20:02:10.763 回答