0

I've reading how to handle whether a forms is valid or invalid, and I can't figure it out why I cannot make my code work properly.

My Html form

 <form name="signupForm" ng-submit="submitRegistration(signup)" ng-init="signup = {}" novalidate>
<input type="email" placeholder="Email" name="email" ng-model="signup.email"required></input>
<input type="password" placeholder="Password" name="password" ng-model="signup.password"required></input>

          <button type="submit" class="button button-block button-balanced">
                Registrarme!
          </button>
</form>

My controller

$scope.submitRegistration = function(signupForm){
        debugger;
        $scope.msg = {};
        if ($scope.signupForm.$valid){
//something}else{
console.log('INVALID')
}

I tried $scope.signupForm.$valid and signupForm.$valid... both I got undefined. How can I do this in the controller side?

EDIT this is my full code (is registration form, I am using Ionic framework)

<ion-view view-title="Registrate!">
<ion-content class="padding">

<h1 class="general-title">BuenjugadorApp</h1>

    <button class="button button-block facebook-button icon-left ion-social-facebook" ng-click="facebookSignup()">Registrate con Facebook</button>

    <button class="button button-block button-balanced" ng-click="nosotros = true">Registrate con Nosotros</button>

 <div class="error-notice" ng-if="msg.error">
  <span>¡Ocurrió un error! Vuelve a intentarlo.</span>
 </div>
  <div class="error-notice" ng-if="msg.required">
  <span>¡Todos los campos deben ser completados!</span>
 </div>
  <div class="error-notice" ng-if="msg.different_passwords">
  <span>¡Las contraseñas ingresadas no coinciden!</span>
 </div>

 <div class="error-notice" ng-if="msg.too_big_password">
  <span>¡Las contraseña es demasiado larga, no puede superar los 12 caracteres!.</span>
 </div>
<br>

<div >
<form name="signupFormulario" ng-submit="submitRegistration(signupForm)" ng-init="signupForm = {}" novalidate>
  <div class="list">
       <label class="item item-input item-floating-label">
        <span class="input-label">Email</span>
        <input type="email" placeholder="Email" name="email" ng-model="signupForm.email"required>
      </label>
      <label class="item item-input item-floating-label">
        <span class="input-label">Nombre</span>
        <input type="text" placeholder="Nombre" name="nombre" ng-model="signupForm.nombre"required>
      </label>
       <label class="item item-input item-floating-label">
        <span class="input-label">Apellido</span>
        <input type="text" placeholder="Apellido" name="apellido" ng-model="signupForm.apellido"required>
      </label>
      <label class="item item-input item-floating-label">
        <span class="input-label">Contraseña</span>
        <input type="password" placeholder="Contraseña" name="password" ng-model="signupForm.password"required>
      </label>
       <span class="advise">La contraseña debe ser mayor o igual a 6 caracteres.</span>
       <label class="item item-input item-floating-label">
        <span class="input-label">Repetir Contraseña</span>
        <input type="password" placeholder="Repetir Contraseña" name="password" ng-model="signupForm.password_confirmation"required>
      </label>
            <label class="item item-input item-floating-label">
        <span class="input-label">Edad</span>
        <input type="number" placeholder="Edad" name="edad" ng-model="signupForm.edad" min="10" max="99" required>
      </label>
        <label class="item item-input item-floating-label">
          <span class="input-label">Teléfono</span>
          <input type="number" placeholder="Teléfono"  name="telefono" max="999999999999999" ng-model="signupForm.telefono" required>
        </label>
        <span class="advise">Debes ingresar tu número para que los jugadores puedan contactarse mejor con vos.</span>

      <label class="item item-input">
      </label>
      <label class="item item-input item-select">
          <div class="input-label">
            Tu Equipo
          </div>
        <select ng-model="signupForm.equipo2" ng-init="signupForm.equipo2 = {}"  required>
            <option ng-value="equipo" ng-repeat="equipo in equipos">{{equipo.nombre}}</option>
          </select>
        </label>

       <label class="item item-input item-select">
          <div class="input-label">
            ¿De qué jugás?
          </div>
        <select name="posicion" ng-model="signupForm.posicion" required>
            <option ng-value="posicion.nombre" ng-repeat="posicion in posiciones">{{posicion.nombre}}</option>
          </select>
        </label>

        <label class="item item-input item-select">
          <div class="input-label">
            ¿De dónde sos?
          </div>
        <select name="lugar" ng-model="signupForm.provincia" ng-change="cambiovalor(signupForm.provincia)" required>
            <option ng-value="prov" data-ng-repeat="(prov, ciudadesss) in complejos">{{prov}}</option>
          </select>
        </label>

        <label class="item item-input item-select">
          <div class="input-label">
            ¿Ciudad?
          </div>
        <select ng-disabled="!signupForm.provincia" ng-model="signupForm.ciudad" name="city" required>
            <option ng-value="ciudad" data-ng-repeat="ciudad in ciudades">{{ciudad}}</option>
          </select>
        </label>


          <button type="submit" class="button button-block button-balanced">
                Registrarme!
          </button>
           <div class="centered">
               <a ng-href="#/login">Ya tengo una cuenta.</a>
           </div>
  </div>
</form>
</div>
</ion-content>
</ion-view>
Ezequiel Ramiro
  • 760
  • 1
  • 12
  • 29
  • Possible duplicate of [AngularJS check if form is valid in controller](http://stackoverflow.com/questions/20054055/angularjs-check-if-form-is-valid-in-controller) – Makoto Apr 14 '17 at 21:30
  • In actuality, this looks to be two typos; your form is named `signupForm` yet you're passing `signup` to your controller, and `$scope.signupForm` is immaterial since you've already got access to `signupForm`. – Makoto Apr 14 '17 at 21:31
  • 1
    @Makoto even if the answer for that question applies here, the questions themselves are different. So... it should not be marked as dupe, cause it is a distinct question. – frosty Apr 14 '17 at 21:40
  • @frosty: That is *literally* the definition (and point) of marking a question as a dupe. See [this Meta.SE post](https://meta.stackexchange.com/a/10844/175248) for more context into it. – Makoto Apr 14 '17 at 21:42
  • 1
    Your code works absolutely fine: http://plnkr.co/edit/8l51lU0K0V48zJn3Y3eC?p=preview. So the problem is in what you're not showing us. Post a complete, minimal example reproducing the problem. – JB Nizet Apr 14 '17 at 21:46
  • odd.. I copied @JBNizet 's code and it didn't work on my environment.. could be something about Ionic? Or angular 1.6.4? – Ezequiel Ramiro Apr 14 '17 at 21:57
  • My guess is that your form is inside an ng-if or some other directive which defines its own scope. If you posted a complete example actually reproducing the problem, we could explain. – JB Nizet Apr 14 '17 at 21:58
  • note that parameter you are passing to `submitRegistration()` is not the form object...it is your model .... to pass form in should be `ng-submit="submitRegistration(signupForm)"` – charlietfl Apr 14 '17 at 22:42
  • The `` element is a [void element](http://w3c.github.io/html-reference/syntax.html#void-elements) and **must not** have a closing tag (``). Try making the HTML5 legal. – georgeawg Apr 14 '17 at 23:24
  • @Makoto, you and I are *literally* understanding that meta.se post differently. Two same questions are dupes, but two different questions... are not explicitly dupes. You are treating it so black and white, when that meta post doesn't explain it that way. – frosty Apr 18 '17 at 16:15

0 Answers0