CODEWITHSUNDEEP
angularjs
lastNerve
lastNerve

Reputation: 121

ng-disabled not working on Submit button in AngularJS 1.4.8

This is my first AngularJS contact form (new to AngularJS). I've read many posts about this problem and tried many solutions, but I can't get it. Seems simple enough but I'm stumped.

I want to disable the Submit button until the required inputs (email and comments) have been populated.

Also, the email and comments error messages display immediately on page load instead of waiting for the blur.

This is the correct js (the script I was using was from a tutorial, which I misunderstood):

angular.module('contForm', [])
    .controller('contCtrl', function ($scope) {
    $scope.user = {};
})

<form ng-app="contForm" ng-controller="contCtrl" name="mailForm" novalidate>
    <input type="text" name="name" ng-model="user.name"  size="31" maxlength="50"><br>

    <input type="text" name="phone" ng-model="user.phone" size="31" maxlength="12"><br>

    <span ng-show="mailForm.email.$touched && mailForm.email.$invalid">Please enter your email address. </span> 

    <input type="email" name="email" ng-model="user.email" size="31" maxlength="100" required><br>

    <span ng-show="mailForm.contComments.$touched && mailForm.contComments.$invalid">Please enter your comments. </span>                        

    <input type="text" name="contComments" ng-model="user.comments" required><br>

    <input type="submit" name="subComments" value="SEND" ng-disabled="mailForm.$invalid">
</form>

Upvotes: 3

Views: 426

Answers (1)

Maher
Maher

Reputation: 2547

I can't find that error, i think your source is not complete, i used cdn angularjs. 

input.btn[disabled] {
  background: red;
}
<!DOCTYPE html>
<html >
<head>
    <title></title>
    <meta charset="utf-8" />
</head>
<body>

    <form ng-app="app" ng-controller="ctrl" name="mailForm" novalidate>
        <input type="text" name="name" ng-model="user.name" size="31" maxlength="50"><br>

        <input type="text" name="phone" ng-model="user.phone" size="31" maxlength="12"><br>

        <span ng-show="mailForm.email.$touched && mailForm.email.$invalid">Please enter your email address. </span>

        <input type="email" name="email" ng-model="user.email" size="31" maxlength="100" required><br>

        <span ng-show="mailForm.contComments.$touched && mailForm.contComments.$invalid">Please enter your comments. </span>

        <input type="text" name="contComments" ng-model="user.comments" required><br>

        <input class="btn" type="submit" name="subComments" value="SEND" ng-disabled="mailForm.$invalid">
    </form>


    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.js"></script>
    <script>
        var app = angular.module("app", []);

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

        });
    </script>
</body>
</html>

Upvotes: 2

Related Questions