Can't access form on $scope

Should we be using $parent? What’s the recommended approach? I’ve got this setup:

<view>
 <content>
  <form name="loginForm">
  </form>
 </content>
</view>

And $scope.loginForm is undefined on submit.

If I change it to be this:

<view>
 <div class="content">
  <form name="loginForm"></form>
 </div>
</view>

It works…

I would expect the first example to work though as it feels more standard.

check out my issue on github: https://github.com/driftyco/ionic/issues/555 @andytjoslin kind of explains why it happens (in the form on a suggested issue description)

so yeah <content> is throwing it off because of it’s isolated scope ( I believe)

Is this fixed? I have to remove <ion-content> in order it to work. I thought I was doing something wrong for hours until I found this post.

Well I’m lost too. You “used” to be able to access the form controller from the controller. However, I can’t get it to work at all anymore - even when using $parent.

@mhartington : Do you know of something that would cause this? Did AngularJS change to prevent it?

See : http://codepen.io/calendee/pen/jKFhp?editors=101

I “should” be able to access $scope.testForm from the controller, but can’t.

@Calendee Not sure if this is the desired results but…

@mhartington You’ve removed the ng-controller. So, the problem is still how to access the Angular form controller from the actual view controller. It used to be possible. If I add ng-controller back to yours, it dies because “testForm” is not available on the scope of “MainCtrl”

Ah alright, so you’re trying to get the text thats inside lastName, correct? Yeah I’m not sure what the issue is. I gave it another try and was able to get this.

Heres the full page so you can see the console

http://codepen.io/mhartington/debug/nvgfy

Thanks for the example and the explanation!

Its cannot working again at this moment from your solution

1 Like

use controllerAs

in app.js:
image

in controller.js
image

in login.html

then all things work as usual

6 Likes

Thank you so much!
I was reading so much bullshit on this thread with people that didn’t even try to understand what was going on!
I was mad because I could not get the for to work without it been the first element of the page (which rarely is) and your post helped me, thanks man, thanks you a lot!


If you can’t find a nested form in your $scope, check @DiscGolfer17 answer Jan’14.

This solved a 3hr problem for me trying to find a form in a modal. Works like a charm.

Thanks a lot, this definitely works!

Have the same problem, but it works now! Thank all of you ~

I ran into this problem too.

As a bit of a work around, you can pass the form into the current controller $scope like this…

<form name="form" ng-submit="submit(form)" novalidate>

then in your controller you can access the validation results etc like so…

$scope.submit = function (form) { 
    var isValid = form.$valid;
}

after more than 6 hours trying to figure out what was going on with my code, i casually printed my whole object (i had an object user with name and password in it but when i tried to catch the name it gave me this undefined error) and i had my name still undefined but my password returned its value… Idk if this can help ppl, but i went to check my input tag and the difference between the name input and password input was the type. I have no idea why but with the type=email we have the input undefined. Changed to type=text and yay it worked.

I have the same problem i tried fixing with your suggestions but nothing so far

here is my sample code guys any help will be much appreciated please.

ion-view title=“Login” id=“page16”>


img


User Name


Name required.
            </label>
            <label class="item item-input">
                <span class="input-label">Email</span>
                <input type="email" name="email" placeholder="Enter your email" ng-model="email" required>
                <span style="color:red" ng-show="logform.email.$dirty && logform.email.$invalid">
                <span ng-show="logform.email.$error.required">Email required.</span>
                <span ng-show="logform.email.$error.email">Invalid email.</span>
            </span>
            </label>

            <button id="login-button14" ng-click="sendform()" class="button button-assertive  button-block buttoncolor"  ng-disabled="logform.user.$dirty && logform.user.$invalid ||
    logform.email.$dirty && logform.email.$invalid">Login</button>
        </form>
    </div>
    
    
</ion-content>

Still a relelvant problem. Solved like this:-

imagine the same controller being used for an ionic app and for a web app.

set the controller up like this

$scope.form = {
    data: {},
    name: 'myformname'
}

$timeout(function() {
    console.log('formController is ', $scope.form.name);
   //or
  $scope.form.name.myfield.$setViewValue('hello');
});

ionic template:-

<form name="$parent.form.name">
   <input name="myfield" type="text" ng-model="$parent.form.data.myfield"/>
</form>

Web template:-

<form name="form.name">
   <input name="myfield" type="text" ng-model="form.data.myfield"/>
</form>

I tried all the solutions that were mentioned in this trade.
in case of:

<ion-content>
    <form name="$parent.form.name"></form>
</ion-content>

$parent - object does not have any form field. Only sending the form through the function call works for me, but it is not the best solution.