pejman pejman - 2 years ago 86
AngularJS Question

AngularJS validation issue

I try to validate a form

by using AngularJS directives, so I try:

<form id="productForm" name="productForm" novalidate>
<div style="width: 100%; margin-top: 15px; float: right; ">
<label style="width:103px;float:right" class="col-sm-2" for="ProductName">ProductName: </label>

<div style="float:right" class="col-sm-5">
<input ng-required="true" class="form-control" style="float:right" type="text" id="ProductName" name="ProductName" ng-model="modal.ProductName" value="" />
<div style="float:right" class="col-md-7" >
<span class="help-block" ng-if="productForm.ProductName.$error.required && productForm.ProductName.$dirty && productForm.ProductName.$touched "> Name is Must</span>

<button class="btn" style="background-color: #ed9c28;" type="button" ng-click="Save()" ng-disabled="productForm.$invalid">Save</button>

In this way the problem is: when user touch the
and then it lost focus, the required message didn't show( it just was shown when user type in the input and then clear whole text from the input, but I want to show error message when the input is empty), i try to use
of error message for do it, but it doesn't work, How can I do it?

Answer Source

I would omit the check for $dirty and instead check for $invalid and $touced:

ng-if="productForm.ProductName.$invalid &&  productForm.ProductName.$touched"
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download