Modal : Clear Form + Validation

ionic-v1
1

I have created modals using this tutorial http://ionicframework.com/docs/guide/building.html

 Modal.fromTemplateUrl('templates/modal.html', function(modal) {
    $scope.addSlideModal = modal;
  }, {
    // Use our scope for the scope of the modal to keep it simple
    scope: $scope,
    // The animation we want to use for the modal entrance
    animation: 'slide-in-up'
  });

There is a form inside modal.

<form name="form_add_slide" ng-submit="createSlide(addslide)">
  <div class="list">
    <label class="item item-input item-stacked-label">
      <span class="input-label">Text</span>
      <textarea name="title" ng-model="addslide.title"></textarea>
    </label>
    <label class="item item-input item-stacked-label">
      <span class="input-label">Notes</span>
      <input type="text" placeholder="Add Notes" name="content" ng-model="addslide.content"/>
    </label>
  </div>
  <div class="row">
    <button type="submit" class="button button-block button-positive">Save</button>
  </div>
</form>

in my controller

$scope.createSlide = function(slide) {
    // save is success        
    // clear form
  }

but i cant clear the form.
I cant access $scope.addslide or $scope.form_add_slide

Do you have any idea how to clear the form?

2

Hey @lkybstrd, define addslide before you create the modal in your controller, like this:

$scope.addslide = {};

Then your code. Does that work?

3

Thanks @max, it works!

4

I can clear the model using $scope.addslide but i still cant access the form using $scope.form_add_slide. Anyone have any idea how to access form in modal? I want to use some validation when submitting the form.

5

@lkybstrd, using the name="" attribute doesn’t do anything in Angular. If you want to do validation, your best bet is to try something in here: http://www.ng-newsletter.com/posts/validations.html

6

sure i do read the link you provided.
it does tell me this code

$scope.signupForm = function() {
if ($scope.signup_form.$valid) {
  // Submit as normal
} else {
  $scope.signup_form.submitted = true;
}

}

but i cant access $scope.signup_form when the form is in modal.

7

I see, I guess I was wrong about name doing something, it’s tied to the <form> directive.

In this case, I think your best bet is to put an ng-controller on the Modal itself, and then process the form validation and stuff inside the modal controller, only passing data to the parent scope when you are done. What happens when you pass in a scope to the modal controller is that it is inherited, so technically it is the child not the parent.

The alternative is to iterate the child scopes, which is not recommended but could work: http://jsfiddle.net/Lv7Wr/

8

I’ve had a similar issue when trying to get the form controller published into the parent scope as indicated in the AngularJS docs. The problem is that you most likely have this form sitting inside one of Ionic’s directives (like content, tab, nav-view, etc). Since these directives create their own scopes the form controller is likely getting published into one of those since it is the immediate parent (rather than your controller’s scope being the immediate parent). One way that I have worked around this is to add both the name="blah" and ng-controller="blahCtrl" to the form element. So for your case set the ng-controller attribute on the form to the same name as the controller where you are calling Modal from.

Hope that helps.

9

This does work but is an untidy way - duplicating the controller on form elements just takes resource. However I don’t have a better method.

Just waking this thread up incase anyone has solved this problem - or have Ionic and I have missed it somewhere.

thanks

10

Dear lkybstrd,

Here is the solution:
In your function you have to pass your form name as parameter to your function to catch it in order to clear it:::

“< f o r m n a m e =“f o r m _a d d _ s l i d e” n g- s u b m i t =“createSlide(addslide,form_add_slide)”>”

$scope.createSlide = function(slide,yourForm) {
// save is success
// clear your form here form like => yourForm.$setPristine();
=> yourForm.$setUntouched();
}

11

@Ahmad_Aqrabawi i tried this and it doesnt seem to be working.