html ANGULAR - 验证多个ng-form

Posted 2021-05-11

// create our angular app and inject ngAnimate and ui-router 
// =============================================================================
angular.module('formApp', ['ngAnimate', 'ui.router'])

.factory('validator', function() {
  return {
    profileForm: null,
    extended: null,
    isValid: function(){
      return this.profileForm;
    }
  }; 
})

// configuring our routes 
// =============================================================================
.config(function($stateProvider, $urlRouterProvider) {
    
    $stateProvider
    
        // route to show our basic form (/form)
        .state('form', {
            url: '/form',
            templateUrl: 'form.html',
            controller: 'formController'
        })
         
        // nested states 
        // each of these sections will have their own view
        // url will be nested (/form/profile)
        .state('form.profile', {
            url: '/profile',
            templateUrl: 'form-profile.html',
            controller: function($scope, validator){
              $scope.$watch('profileForm.$valid', function(value) {
                  validator.profileForm = value;
                  console.log(validator); 
              });
            }
        })
        
        // url will be /form/interests
        .state('form.interests', {
            url: '/interests',
            templateUrl: 'form-interests.html'
        })
        
        // url will be /form/payment
        .state('form.payment', {
            url: '/payment',
            templateUrl: 'form-payment.html'
        });
       
    // catch all route
    // send users to the form page 
    $urlRouterProvider.otherwise('/form/profile');
})

// our controller for the form
// =============================================================================
.controller('formController', function($scope, validator) {
    
    // we will store all of our form data in this object
    $scope.formData = {};
    //console.log($scope.profileForm); 
    
    
    
      $scope.isValid = function() {
        return validator.isValid();
      };
    
      
    // function to process the form
    $scope.processForm = function() {
        alert('awesome!');  
    };
    
});

<div ng-form="profileForm">
  <div class="form-group">
      <label for="name">Name</label>
      <input type="text" class="form-control" name="name" ng-model="formData.name" required>
  </div>
  
  <div class="form-group">
      <label for="email">Email</label>
      <input type="text" class="form-control" name="email" ng-model="formData.email" required>
  </div>

</div>

<div class="form-group row">
<div class="col-xs-6 col-xs-offset-3"> 
    <a ui-sref="form.interests" ng-disabled="profileForm.$invalid" class="btn btn-block btn-info">
    Next Section <span class="glyphicon glyphicon-circle-arrow-right"></span>
    </a>
</div>
</div>