Ionic popup $scope template form $valid

ionic-v1
1

Hi I wonder how I get the $valid of a form in an Ionic popup show template. I can see that the template works and the $valid works in the form but i cant get in in the controller. How do I make sure the popup have the same scope as the controller?

.controller("UserCtrl", function($state, $scope, $http, user, $ionicPopup, $ionicViewService, $ionicNavBarDelegate, $cordovaStatusbar){
  $scope.change_pin_form = {
    'current_pin': null,
    'new_pin': null
  };

  $scope.changePIN = function(){
    $scope.changePINPopup = $ionicPopup.show({
      templateUrl:'pages/change-pin.html',
      title: 'Change PIN',
      subTitle: 'With a PIN the checkout process becomes faster.',
      scope: $scope,
      buttons: [
        { text: 'Cancel',
        },
        { text: 'Change',
          type: 'button-positive button-register',
          onTap: function(e) {
            e.preventDefault();
            console.log("THE FORM:", $scope.change_pin_form);
            if($scope.change_pin_form.$valid){
              var x = user.setPIN($scope.change_pin_form.new_pin);
              x.then(function(d){
                $scope.changePINPopup.close();
                $scope.purchase(true);
              }, function(d){
                console.log('Error setting PIN');
                $scope.changePINPopup.close();
              });
            } else {
              console.log("Form not valid, you cant click me!");
            }
          }
        }
      ]
    });
  };
})

  <script id="user.html" type="text/ng-template">
      <ion-view title="User data" ng-controller="UserCtrl" class="user-view">
        <ion-content>
          <div class="buttons">
            <button class="button change-pin button-block button-default" ng-click="changePIN()">Change PIN</button>
          </div>
        </ion-content>
      </ion-view>
  </script>

<div class="change_pin_popup_form">
<div>ERROR {{change_pin_form.$valid}} </div>
  <form name="change_pin_form" novalidate>
    <div class="form-item">
      <label class="item item-input item-stacked-label">
        <span class="input-label">Current PIN</span>
        <input type="number" name="current_pin" ng-model="current_pin" correct-pin="{{current_pin}}" ng-minlength=4 ng-maxlength=4 required>
      </label>
      <div class="error-container" ng-show="change_pin_form.current_pin.$dirty && change_pin_form.current_pin.$invalid">
        <small class="error" ng-show="change_pin_form.current_pin.$error.required">Please input your current PIN</small>
        <small class="error" ng-show="change_pin_form.current_pin.$error.correct-pin">Wrong PIN</small>
      </div>
    </div>
    <div class="form-item">
      <label class="item item-input item-stacked-label">
        <span class="input-label">New PIN</span>
        <input type="number" name="new_pin" ng-model="new_pin" ng-minlength=4 ng-maxlength=4  required>
      </label>
      <div class="error-container" ng-show="change_pin_form.new_pin.$dirty && change_pin_form.new_pin.$invalid">
        <small class="error" ng-show="change_pin_form.new_pin.$error.minlength || change_pin_form.new_pin.$error.maxlength">Your PIN is required to be 4 digits</small>
      </div>
    </div>
  </form>
</div>
2

try to set form name as an object key:
in your controller:
$scope.form = {};

in your template

3

Thought this in the beginning did that :confused:

$scope.change_pin_form = {
    'current_pin': null,
    'new_pin': null
  };
4

If i remove the <form name="whatever"> tag from the template i get the variables to the controller but then the form validation stops working.

Also by adding separate name for the form and ng-model i can at least validate the form on two places but still seems like a lot of extra then just checking the form.$valid.

5

Iā€™d be interested in a proper solution as well.

6

Do this i your controller:

$scope.form = {
myForm: {}
};

In your template:

now form validation should work and you get the form-object on $scope.form.myForm.

1 Like
7

Thank you for your solution!

8

For anyone looking for a solution in the form of an example see the $ionicPopup.show in the docs at http://ionicframework.com/docs/api/service/$ionicPopup/. It allows you to set the scope attached to the popup as well as preventDefault event propagation.