Form Validation not working AngularJS - 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!

Answer 1

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

Answer 2

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

Answer 3

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>