Form and data-binding

Hi Folks,

I am new with ionic framework, with angular and in general with front end and app development (I come from the dark world of java ser-ver side :smile:

I thought that I understood the basics but when I was trying to do a simple register page… my perception has changed.

The unique thing that I want to do is a form that shows inputs to fill and then this data appears in the controller. Before ask this forum I have been trying different strategies, in theory I have read a lot of documentations about inherance, scopes and all this stuff to understand how it works.

I paste some examples, sorry if there is some mistake, I have reviewed, but after hundreads of changes… maybe I am missing something

My simplified view:

<ion-view title="Registro" ng-controller="RegisterCtrl">
  <ion-content has-header="false" padding="true" >

      <form class="list" ng-submit="register(person)">

      <div>{{message}}</div>

        <div class="list list-inset">
          <label class="item item-input light-color">
            <input type="text" placeholder="Introduce el nick name" ng-model"person.username">
          </label>
          <label class="item item-input light-color">
            <input type="text" placeholder="Introduce el nombre" ng-model"person.name">
          </label>
          <label class="item item-input light-color">
            <input type="text" placeholder="Introduce los apellidos" ng-model"person.surname">
          </label>
          <label class="item item-input light-color">
            <input type="email" placeholder="Introduce el email" ng-model"person.email">
          </label>
          <label class="item item-input light-color">
            <input type="password" placeholder="Introduce el password" ng-model"person.password">
          </label>
          <label class="item item-input light-color">
            <input type="password" placeholder="Repite el password" ng-model"person.repeatpassword">
          </label>
        </div>

          <button class="button button-block button-dark" type="submit">Registrarse</button>
      </form>

</ion-content>

Then the controller

the simplified controller (To focus in mu current binding problem)

.controller('RegisterCtrl', function($scope, $http, $state, $ionicViewService, AuthenticationService) {

  'use strict';

  $scope.message = '';


  $scope.person = {
    'username': '',
    'name': '',
    'surname': '',
    'email': '',
    'password': '',
    'repeatpassword': ''
  };

  $scope.register = function(person) {
    console.log(person.username);
    AuthenticationService.register($scope.person);
  };

})

And I don’t know if you need more informationindent preformatted text by 4 spaces

You’ve forgotten about “=” in your ng-model. It will be better if your keys in your $scope.person are without ’ '.

1 Like

OK! Thank you very much! Now I feel like the worst developer in the word… a fucking ‘=’

One thing, I use atom as IDE, is there some hint or plugin to help me to detect this “stupid things” in html?