CODEWITHSUNDEEP
angularjs
linktoahref
linktoahref

Reputation: 7972

Form Validation not working AngularJS

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!

Upvotes: 0

Views: 1433

Answers (3)

Jenny
Jenny

Reputation: 663

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>

Upvotes: 0

Ramesh Rajendran
Ramesh Rajendran

Reputation: 38683

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

Upvotes: 1

Gayathri
Gayathri

Reputation: 1896

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

Upvotes: 3

Related Questions