AngularJS form validation is not working, empty form displayed

Question

I am trying to create a form that contains selects and inputs. Unfortunately when i added this form nothing happens when when input is filled, no action ... Below is my code:

<form name="myForm" novalidate>
   <p>Username:
      <br>
      <input type="text" name="user" ng-model="user" required>
         <span style="color:red" ng-show="myForm.user.$dirty && myForm.user.$invalid">
           <span ng-show="myForm.user.$error.required">Username is required.</span>
         </span>
   </p>
   <p>
      <input type="submit" ng-disabled="(myForm.user.$dirty && myForm.user.$invalid) ||  (myForm.email.$dirty && myForm.email.$invalid)">
      </p>
      {{(myForm)}}
      {{myForm}}
      {{myForm.user.$error}}
      {{myForm.user.$dirty}}           
  </form>

When I realized that nothing happened, I decided to display myform properties as plain text, {{(myForm)}} {{myForm}} {{myForm.user.$error}} {{myForm.user.$dirty}} but nothing displayed !

So, any suggestions to make it working?

nash11 · Accepted Answer · 2019-06-11 06:43:08Z

All AngularJS applications must have a root element. The ng-app directive tells AngularJS which is the root element of the application. See https://www.w3schools.com/angular/ng_ng-app.asp. I am able to make your code work when I add ng-app to your HTML.

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>

<body ng-app="">
  <form name="myForm" novalidate>
    <p>Username:
      <br>
      <input type="text" name="user" ng-model="user" required>
      <span style="color:red" ng-show="myForm.user.$dirty && myForm.user.$invalid">
           <span ng-show="myForm.user.$error.required">Username is required.</span>
      </span>
    </p>
    <p>
      <input type="submit" ng-disabled="(myForm.user.$dirty && myForm.user.$invalid) ||  (myForm.email.$dirty && myForm.email.$invalid)">
    </p>
    {{(myForm)}} {{myForm}} {{myForm.user.$error}} {{myForm.user.$dirty}}
  </form>
</body>

Thank you for your reply, I already have a controller and a module defined, the problem was that I already had another form defined, and the validation form was implemented inside it; that was creating some conflicts. Your code helped me to discover this issue.

Jayoti Parkash · Accepted Answer · 2019-06-11 06:44:02Z

Try in this way:

<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
    <title>Event Registration</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.9/angular.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>

<body>

<h1> Guru99 Global Event</h1>
<form ng-app="DemoApp" ng-controller="DemoController" name="myForm" novalidate>
    <p>Topic Name:<br>
        <input type="text" name="user" ng-model="user" required>

        <span style="color:red" ng-show="myForm.user.$dirty && myForm.user.$invalid">

            <span ng-show="myForm.user.$error.required">Username is required</span>
        </span>
    </p>
    <p>
        <input type="submit" ng-disabled="myForm.user.$dirty && myForm.user.$invalid">
    </p>
</form>
<script>
    var app = angular.module("DemoApp",[]);

    app.controller("DemoController",function($scope) {

        $scope.Display = function () {
            $scope.user='Angular';
        }
    });
</script>
</body>
</html>

Collectives™ on Stack Overflow

AngularJS form validation is not working, empty form displayed

2 Answers 2

1 Comment

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Related