Angular Form validation with minimum and maximum number

Apr 17 2019 1:11 AM

Hi,

In my application i am trying to add one validation where having two textbox in the condition,

---- Both the textbox accept only number.

---- Minimum value will be 0 from the first textbox

---- In second textbox minimum value will be , first textbox value

I have added number and required field validation with angularjs but i am not able to do how to do add validation to accept only positive number and minimum number based on first textbox.

Here is my complete code

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script src="https://code.angularjs.org/1.2.21/angular.js"></script>
<script>
var mod = angular.module("myApp", []);
mod.controller("MainCtrl", function ($scope, $compile) {
});
</script>
</head>
<body data-ng-app="myApp" data-ng-controller="MainCtrl">
<div class="container">
<h5 class="text-center">Angular Form validation</h5>
<hr />
<div class="form-row">
<div class="col-md-6 offset-md-3">
<ng-form name="form1">
<div class="form-row">
<div class="form-group form-row col-md-12">
<label for="txtCS" class="col-md-6 col-form-label ">Chainage Start<span class="badge alert-danger" style="top: 3px; margin-left: -1px; position: absolute" ng-show="form1.ChF.$invalid">required</span></label>
<div class="col-md-6">
<input type="number" class="form-control" id="txtCS" valid-number data-ng-model="vcf" name="ChF" data-ng-class="{ 'is-invalid' : form1.ChF.$invalid && !form1.ChF.$pristine,'is-valid' : !form1.ChF.$pristine }" required />
<p data-ng-show="form1.ChF.$invalid && !form1.ChF.$pristine && !form1.ChF.$error.minlength" class="invalid-feedback"><i class="fa fa-frown-o" aria-hidden="true"></i> Starting chainage is required!</p>
</div>
</div>
</div>
<div class="form-row">
<div class="form-group form-row col-md-12">
<label for="txtCE" class="col-md-6 col-form-label ">Chainage End<span class="badge alert-danger" style="top: 3px; margin-left: -1px; position: absolute" ng-show="form1.ChE.$invalid">required</span></label>
<div class="col-md-6">
<input type="number" class="form-control" id="txtCE" valid-number data-ng-model="vce" name="ChE" data-ng-class="{ 'is-invalid' : form1.ChE.$invalid && !form1.ChE.$pristine,'is-valid' : !form1.ChE.$pristine }" required />
<p data-ng-show="form1.ChE.$invalid && !form1.ChE.$pristine && !form1.ChE.$error.minlength" class="invalid-feedback"><i class="fa fa-frown-o" aria-hidden="true"></i> Ending chainage is required!</p>
</div>
</div>
</div>
<div class="form-row">
<div class="form-group form-row col-md-6">
<button class="btn btn-outline-info btn-block" data-ng-disabled="form1.$invalid">Submit</button>
</div>
</div>
</ng-form>
</div>
</div>
</div>
</body>
</html>

I want someone's help to solve the issue

1. If we enter more value in the second textbox compare to first one then should give error message as well as form should be invalid,

2. Both the textbox can accept only positive number.

Answers (1)

Bind date to a formControlname input in Angular7

Angular 7 querystring param