Angular validation error

i have two form of signup and login with code written under single controller with two function called on submit the first form work correctly but the signup always show errors preview here in https://plnkr.co/edit/RS2LVc?p=preview

var app = angular.module('abc', []);
  app.controller('login', function ($scope) {
    scope.LoginValidator = function ($event) {
            if ($scope.LoginForm.$valid) {
                  console.log('Logged In');
            } else {
                        console.log("invalid");
                        if ($scope.LoginForm.Email.$invalid) {
                            $scope.mailRequire = true;
                        }
                        if ($scope.LoginForm.password.$invalid) {
                            $scope.passRequire = true;
                        }
                        $event.preventDefault();
                  }
            };

then second function starts here and shows error

$scope.SignupValidator = function ($event) {

if ($scope.SignupForm.$valid) {
    console.log("Valid");
} else {
    alert('InValid Data');
    if ($scope.SignupForm.Fullname.$invalid) {
        $scope.namerequire = true;
    }
    if ($scope.SignupForm.email.$invalid) {
        $scope.emailrequire = true;
    }
    if ($scope.SignupForm.rollno.$invalid) {
        $scope.rollrequire = true;
    }
    if ($scope.SignupForm.password.$invalid) {
        $scope.passwordrequire = true;
    }
    if ($scope.SignupForm.confirm.$invalid) {
        $scope.confirmrequire = true;
    }
    $event.preventDefault();
}

};
});

Solution

I updated the plunkr file please check :-

// Code goes here
var app = angular.module('abc', []);

app.controller('login', function ($scope) {
    $scope.LoginValidator = function ($event) {
        if ($scope.LoginForm.$valid) {
            console.log('Logged In');
        } else {
            console.log("invalid");
            if ($scope.LoginForm.Email.$invalid) {
                $scope.mailRequire = true;
            }
            if ($scope.LoginForm.password.$invalid) {
                $scope.passRequire = true;
            }
            $event.preventDefault();
        }
    };

    $scope.SignupValidator = function ($event) {

        if ($scope.SignupForm.$valid) {
            console.log("Valid");
        } else {
            alert('InValid Data');
            if ($scope.SignupForm.Fullname.$invalid) {
                $scope.namerequire = true;
            }
            if ($scope.SignupForm.email.$invalid) {
                $scope.emailrequire = true;
            }
            if ($scope.SignupForm.rollno.$invalid) {
                $scope.rollrequire = true;
            }
            if ($scope.SignupForm.password.$invalid) {
                $scope.passwordrequire = true;
            }
            if ($scope.SignupForm.confirm.$invalid) {
                $scope.confirmrequire = true;
            }
            $event.preventDefault();
        }
    };
});

/* Styles go here */

<!DOCTYPE html>
<html ng-app="abc">
<head>
    <link data-require="bootstrap@*" data-semver="4.0.5" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" />

    <script data-require="bootstrap@*" data-semver="4.0.5" src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.js"></script>
    <script src="script.js"></script>
</head>

<body ng-controller="login">
    <br><br>
    <form id="login-form" action="/home" name="LoginForm" method="get" class="loginform" role="form" novalidate ng-submit="LoginValidator($event)">
        <fieldset>
            <input type="email" name="Email" id="email" tabindex="1" ng-model="login.email" ng-pattern="/^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/" placeholder="Email" ng-required="true">
            <span style="color:red; display:block; text-align:center;" ng-show="LoginForm.Email.$dirty && LoginForm.Email.$error.pattern">* Please Enter Valid Email</span>
            <span style="color:red; display:block; text-align:center;" ng-show="mailRequire && !LoginForm.Email.$dirty">* Email required</span>

            <input type="password" name="password" ng-minlength="8" id="password" tabindex="2" ng-model="login.password" placeholder="Password" ng-required="true">
            <div ng-show="LoginForm.password.$dirty && LoginForm.password.$invalid"><small style="color:red; display:block; text-align:center;">* Invalid Password</small></div>
            <span style="color:red; display:block; text-align:center;" ng-show="passRequire && !LoginForm.password.$dirty">* Password required</span>
            <input type="submit" value="LOG IN" />
        </fieldset>
    </form>
    <br><br>

    <form id="Signup-form" name="SignupForm" action="/home" method="get" role="form" novalidate ng-submit="SignupValidator($event)">
        <input type="text" id="fullname" name="Fullname" tabindex="1" placeholder="Full Name" ng-minlength="4" ng-model="signup.name" ng-required="true" />
        <small style="color:red; display:block; text-align:center;" ng-show="SignupForm.Fullname.$error.minlength">* Atleast 4 characters</small>
        <span style="color:red; display:block; text-align:center;" ng-show="namerequire && !SignupForm.Fullname.$dirty">* Name required</span>

        <input type="email" name="email" id="email" tabindex="1" ng-pattern="/^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/" placeholder="Email Address" value="" ng-model="signup.email" ng-required="true" />
        <span style="color:red; display:block; text-align:center;" ng-show="SignupForm.email.$dirty && SignupForm.email.$error.pattern">* Please Enter Valid Email</span>
        <span style="color:red; display:block; text-align:center;" ng-show="emailrequire && !SignupForm.email.$dirty">* Email required</span>

        <input type="text" id="rollno" name="rollno" ng-minlength="8" tabindex="1" placeholder="Class Number Eg.(UOS131111)" ng-model="signup.roll" ng-required="true" />
        <span ng-show="SignupForm.rollno.$error.minlength" style="color:red; display:block; text-align:center;">*Invalid Rollno </span>
        <span style="color:red; display:block; text-align:center;" ng-show="rollrequire && !SignupForm.rollno.$dirty">*Roll No required</span>

        <input type="password" name="password" id="password" ng-minlength="8" tabindex="2" placeholder="Password " ng-model="signup.password" ng-pattern="/^(?=.*[0-9])(?=.*[a-zA-Z])([a-zA-Z0-9]+)$/" ng-required="true" />
        <span ng-show="SignupForm.password.$error.minlength" style="color:red; display:block; text-align:center;"><small>* Minimum eight characters</small></span>
        <span ng-show="SignupForm.password.$error.pattern" style="color:red; display:block; text-align:center;"><small>* At least one digit</small></span>
        <span style="color:red; display:block; text-align:center;" ng-show="passwordrequire && !SignupForm.password.$dirty">* Password required</span>

        <input type="password" name="confirm" id="confirm-password" ng-minlength="8" tabindex="2" placeholder="Confirm Password" ng-model="signup.confirm" ng-pattern="signup.password" ng-required="true" />
        <span ng-show="SignupForm.confirm.$error.pattern" style="color:red; display:block; text-align:center;"><small>* Password didn't match</small></span>
        <span style="color:red; display:block; text-align:center;" ng-show="confirmrequire && !SignupForm.confirm.$dirty">* Re enter Password</span>

        <input type="radio" name='Gender' ng-model="signup.gender" value="male" ng-required="true"><i class="fa fa-circle-o fa-2x"></i><i class="fa fa-check-circle-o fa-2x"></i><span> Male</span>
        <input type="radio" name='Gender' ng-model="signup.gender" value="female" ng-required="true"><i class="fa fa-circle-o fa-2x"></i><i class="fa fa-check-circle-o fa-2x"></i><span> Female</span>
        <span style="color:red; display:block; text-align:center;" ng-show="rollrequire && !SignupForm.rollno.$dirty">*Roll No required</span>
        <input type="submit" value="SIGN UP" />
    </form>
</body>

</html>