Angular: Form element not attaching to $scope

I'm well into a redesign using AngularJS as my front-end framework. After a small learning period I'm in love. It's a fantastic way to tie your UI to your backend. That said there is still some work to be done.

I'm breaking my project into modules that are included with the ng-include tag. This helps shrink the code on the page into manageable chunks. It nice when you're using a very verbose framework like Bootstrap.

All of my forms are wired up using Angular's form validation. Once again this is fantastic. Being able to watch the inputs in real time and display helpful errors is great. I ran into an issue trying to reuse a form after I've removed it from the users view.

<form name="createUser">
    <input name="name" ng-model="formObj.name" />
    <input name="email" ng-model="formObj.email" />
</form>

I should be able to access the form in my angular in this fashion.

// This will reset any validation errors on the form
$scope.createUser.$setPristine();

This wasn't working for me and I spent a lot of time trying to figure out why. Here is how my code looked.

<div ng-controller=“controllerName”>
    <div ng-include=“ ‘path-to-the-template’ ”></div>
</div>

<!—- Inside path-to-the-template -—>
<form name="createUser">
    <input name="name" ng-model="formObj.name" />
    <input name="email" ng-model="formObj.email" />
</form>

One thing to consider is when Angular is starting up the controller code the form isn't attached yet. When you click the button that submits the form it will be attached by that time. I was still unable to access the form element.

Update

I submitted this as a bug to the git repo and got a response very quickly. That team is really on top of things. Turns out when you use ng-include it creates a new scope var. This is how the setup should look.

<!—- The vars should live in the controller. I placed them here for the example. -—>
<div ng-controller=“controllerName” ng-init="form={}; model={}" >
    <div ng-include=“ ‘path-to-the-template’ ”></div>
</div>

<!—- Inside path-to-the-template -—>
<form name="form.createUser">
    <input name="name" ng-model="model.name" />
    <input name="email" ng-model="model.email" />
</form>

Now the include can reference the variables from the parent scope. The form and it's input should now be accessible.

Sencha Touch: Submit the form with Go/Enter

I'm in the process of refactoring some code from my first Sencha Touch project. I followed a really great tutorial from Miami Coder used to build a login page. There are a few things I wish it did better in terms of separating view and controller code, but you learn that stuff on the road.

One thing I really wish it covered was submitting the form using the Go key on iPhone, or Enter key. It's reliant on pressing the Log In button and then letting the code grab the values and move on. I want to make two changes. I want to listen for the Go key and submit the form, and I want the code to exist in the Controller, not the View.

First let's set up the View.

                xtype: 'fieldset',
                itemId: 'login-form',
                name: 'login-form',
                items: [
                    {
                        xtype: 'textfield',
                        placeHolder: 'Username',
                        itemId: 'user-name-text-field',
                        required: true,
                        autoComplete: false,
                        autoCorrect: false
                    },
                    {
                        xtype: 'passwordfield',
                        placeHolder: 'Password',
                        itemId: 'password-text-field',
                        required: true
                    }
                ]
            },
            {
                xtype: 'button',
                itemId: 'login-button',
                action: 'login',
                // This is just a color style
                ui: 'action',
                text: 'Log in',
                cls: 'login-button'
            }

Now let's set up the Controller.

config: {
        control:{
            // Listen for the login button
            'button[action=login]':{
                tap: 'tryLogin'
            },
            // Listen for a field form submit
            'fieldset[name=login-form]':{
                action: 'tryLogin'
            }
        }
    }

I listen for events in the Controller instead of launching events through the Application from the View and listening for them elsewhere. The View is kept nice and clean and all the logic is in the Controller where it belongs. The Controller can grab a reference to the View and update whatever it needs.

'control' is my new favorite property. It's great for event listening. Once I found out I could tie a function to a button without listening for a command I never looked back.