Form is not accessible inside controller

Question

I have this ionic page:

<ion-view view-title="Sign up for business">
  <ion-nav-bar class="bar-positive">          
    <ion-nav-back-button></ion-nav-back-button>       
    <ion-nav-buttons side="right">
      <button class="button button-icon icon ion-android-done" ng-disabled="bizzSForm.$invalid" ng-click="submitBizzForm()"></button>
    </ion-nav-buttons>
  </ion-nav-bar>
  <ion-content> 
      <form name="bizzSForm" class="css-form" ng-submit="submitSignUpForm()" novalidate>   
        <div class="list">
          <label class="item item-input">
            <i class="icon ion-person placeholder-icon"></i>
            <input type="text" placeholder="Your business or organization name" name="name" ng-model="bizzFormData.name" ng-minlength="3" ng-maxlength="50" required>
          </label>
            <div ng-show="bizzSForm.$submitted || bizzSForm.name.$touched">
                <span ng-show="bizzSForm.name.$error.required" class="form-err-blk"><i class="ion-close-round"></i>&nbsp;&nbsp;Tell us your business or organization name.</span>
            </div>

I have this controller code:

  $scope.submitBizzForm = function() {
    if($scope.bizzSForm.$valid) {
      $scope.submitSignUpForm();
    }
  }

here $scope.bizzSForm is showing undefined

Answer 1

You can pass the bizzSForm in the ngSubmit callback, and use it as it is:

HTML

<form name="bizzSForm" class="css-form" ng-submit="submitSignUpForm(bizzSForm)" novalidate>
  <!-- content -->
</form>

Javascript

$scope.submitBizzForm = function(form) {
    if(form.$valid) {
      $scope.submitSignUpForm();
    }
};

Answer 2

You need to pass form name as a parameter to the function you want ngSubmit to handle.

<form name="bizzSForm" class="css-form" ng-submit="submitSignUpForm(bizzSForm)" novalidate>

You see that, form should have a name, name="bizzSForm" and pass into function, ng-submit="submitSignUpForm(bizzSForm)"

then inside controller, you just need to call it,

  $scope.submitSignUpForm = function(bizzSForm) {
    if(bizzSForm.$valid) {
      // do something here
      console.log('Form is valid');
    }
  }