Home AngularJS. Need to make button disable when inputs are invalid
Reply: 0

AngularJS. Need to make button disable when inputs are invalid

user2469
1#
user2469 Published in June 19, 2018, 2:43 pm

I'm new to AngularJS and I need to make submit button disabled when text length in input field is more than alowed. I made ng-class assignment based on left symbols, but even when inputs invalid, form has a class valid, but how?? Here is my code example.

//Main file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="../lib/angular.min.js"></script>

<style type="text/css">
    ol {
        margin: 20px 0;
        padding: 20px;
    }

    input.ng-dirty.ng-invalid {
        border: 1px solid red
    }
</style>
</head>
<body ng-app="ngrepeatApp" ng-controller="ngrepeatCtrl">
<div class="container">
    <form novalidate name="paramForm">
        <div class="form-group" ng-repeat="p in params">
            <label>{{p.Title}}</label>
            <input type="text" class="form-control" placeholder="{{p.Description}}" required ng-model="p.Value" ng-class="(lengthDifference(p) < 0) ? 'ng-invalid':'ng-valid'">
            <small class="form-text text-muted">Available <span>{{lengthDifference(p)}}</span> symbols</small>
        </div>
        <button type="submit" class="btn btn-success" ng-disabled="paramForm.$invalid">Submit</button>
    </form>


</div>


<script src="app.js"></script>


</body>

</html>

and simple controller with function that returns length that left

var app = angular.module("ngrepeatApp", []);

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

$scope.lengthDifference=function(p){
    var left =  p.MaxLength - p.Value.length ;
    return left;
};

$scope.params = [
    {
        Title: "Title",
        Description: "Type Title Here",
        Value: "",
        MaxLength: 10
    },
    {
        Title: "DisplayName",
        Description: "Type Title Here",
        Value: "",
        MaxLength: 15
    },
    {
        Title: "Category",
        Description: "Type Category Here",
        Value: "",
        MaxLength: 6
    }
];

});

Thanks for the answering

You need to login account before you can post.

About| Privacy statement| Terms of Service| Advertising| Contact us| Help| Sitemap|
Processed in 0.351427 second(s) , Gzip On .

© 2016 Powered by mzan.com design MATCHINFO