Form Validation not working AngularJS

Question

I am trying to do form validation using AngularJS in Laravel Blade, but it isn't working and when clicked on the submit button undefined gets printed in the console.

HTML:

<div class="uk-grid" ng-app="validationApp" ng-controller="mainController">
  <form name="signupForm" class="uk-form uk-width-1-2" novalidate>
    {{ csrf_field() }}
    <fieldset class="pad50">
      <div class="uk-form-row">
        <input class="bradius2" placeholder="Username" type="text" name="username" ng-modal="user.username" required>
        <div ng-show="signupForm.$submitted || signupForm.username.$touched">
          <span ng-show="signupForm.username.$error.required">Username is required.</span>
        </div>
      </div>
      <div class="uk-form-row">
        <input class="bradius2" placeholder="Email" type="email" name="user_mail" ng-modal="user.user_mail" required>
        <div ng-show="signupForm.$submitted || signupForm.user_mail.$touched">
          <span ng-show="signupForm.user_mail.$error.required">Email is required.</span>
          <span ng-show="signupForm.user_mail.$error.email">Enter a valid email.</span>
        </div>
      </div>
      <div class="uk-form-row">
        <input class="bradius2" placeholder="Password" type="password" name="user_pass" ng-modal="user.user_pass" required>
        <div ng-show="signupForm.$submitted || signupForm.user_pass.$touched">
          <span ng-show="signupForm.user_pass.$error.required">Password is required</span>
        </div>
      </div>
      <div class="uk-form-row">
        <input class="bradius2" placeholder="Confirm Password" type="password" name="user_cpass" ng-modal="user.user_cpass" required>
        <div ng-show="signupForm.$submitted || signupForm.user_cpass.$touched">
          <span ng-show="signupForm.user_cpass.$error.required">Confirm the password</span>
        </div>
      </div>
      <div class="uk-form-row">
        <button class="uk-button bgorange butn uk-button-large" type="submit" id="sign_up_button" ng-click="signupUser(user)">
          <b>SIGN UP VIA EMAIL</b>
        </button>
      </div>
    </fieldset>
  </form>
</div>

app.js:

angular.module('validationApp', [])
.controller('mainController', ['$scope', function($scope) {
    $scope.master = {};

    $scope.signupUser = function(user) {
        $scope.master = angular.copy(user);
        console.log(user);
    };

}]);

I am using Angular version 1.6.1 and also UIKit.

Thanks in advance!

Gayathri · Accepted Answer · 2017-01-11 07:20:18Z

3

It has to be ng-model instead of ng-modal. ng-model is the one which stores the user input in form.

answered Jan 11, 2017 at 7:20

Gayathri

1,9166 gold badges28 silver badges58 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ramesh Rajendran · Accepted Answer · 2017-01-11 07:20:56Z

1

undefined gets printed in the console

you need to initialize the user object

angular.module('validationApp', [])
.controller('mainController', ['$scope', function($scope) {
    $scope.master = {};
     $scope.user = {};// here
    $scope.signupUser = function(user) {
        $scope.master = angular.copy(user);
        console.log(user);
    };
}]);

Form Validation not working AngularJS

You should add this code on your form tag

ng-submit="mainForm.$valid && yourfunction()" //yourfunction means which event you want to be fire

answered Jan 11, 2017 at 7:20

Ramesh Rajendran

38.9k49 gold badges159 silver badges241 bronze badges

4 Comments

Gayathri Over a year ago

user needn't actually be initialised. user is already an object used in form. And all those sub-values already get stored in $scope.user. like $scope.user={c_mail:something, c_pass:something} and so on. Correct me if I am wrong.

Ramesh Rajendran Over a year ago

Nope. If you didn't fill anything in the form fields. it will consider like as undefined object does make sense gayu? :p

linktoahref Over a year ago

Thank you for the ng-submit tip

Gayathri Over a year ago

No you arenot. In presence of validation, it'll prompt to fill required fields and without validation, it'll be just blank null. And moreover, it's nested json that would be already be created in the end on submit. And there's no need to initialise $scope.user={ }

Jenny · Accepted Answer · 2017-01-11 07:25:59Z

0

notice ng-messages:

    <div class="uk-form-row" >
        <input class="bradius2" placeholder="Username" type="text" name="username" ng-model="user.username" required>
        <div ng-messages="signupForm.username.$error" ng-show="signupForm.$submitted || signupForm.username.$touched">
      <span ng-show="signupForm.username.$error.required">Username is required.</span>
    </div>
  </div>

answered Jan 11, 2017 at 7:25

Jenny

6634 silver badges8 bronze badges

Collectives™ on Stack Overflow

Form Validation not working AngularJS

3 Answers 3

Comments

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related