Issue
When I enter 1 character in my input, I would like to display an error message min 3 char at the bottom of the input.
Like this example:
For now, I have this: The error message is on the right
I can use a tag <br> but I think there is a better solution?
I tried this solution, but without success, I don't understand what's wrong.
.lastName {
color: blue;
bottom: 10px;
}
input.ng-pristine {
background-color:yellow;
}
input.ng-touched.ng-invalid {
background-color:red;
}
input.ng-touched.ng-valid {
background-color:green;
}
<!DOCTYPE html>
<html>
<head>
<script src="~/Scripts/angular.js"></script>
<style>
</style>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js"></script>
</head>
<body ng-app>
<form name="studentForm" novalidate class="student-form">
<label for="lastName">Last Name</label><br />
<input type="text" name="lastName" ng-minlength="3" ng-maxlength="10" ng-model="lastName" />
<span ng-show="studentForm.lastName.$touched && studentForm.lastName.$error.minlength">min 3 chars.</span>
<span ng-show="studentForm.lastName.$touched && studentForm.lastName.$error.maxlength">Max 10 chars.</span><br /><br />
<input type="submit" value="Save" />
</form>
</body>
</html>Solution
You can make the input a block level element by giving display: block;
input {
display: block;
}
input.ng-pristine {
background-color:yellow;
}
input.ng-touched.ng-invalid {
background-color:red;
}
input.ng-touched.ng-valid {
background-color:green;
}
<!DOCTYPE html>
<html>
<head>
<script src="~/Scripts/angular.js"></script>
<style>
</style>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js"></script>
</head>
<body ng-app>
<form name="studentForm" novalidate class="student-form">
<label for="lastName">Last Name</label><br />
<input type="text" name="lastName" ng-minlength="3" ng-maxlength="10" ng-model="lastName" />
<span ng-show="studentForm.lastName.$touched && studentForm.lastName.$error.minlength">min 3 chars.</span>
<span ng-show="studentForm.lastName.$touched && studentForm.lastName.$error.maxlength">Max 10 chars.</span><br />
<input type="submit" value="Save" />
</form>
</body>
</html>Answered By - Charan Kumar
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.