pejman pejman - 2 months ago 6x
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?


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

ng-if="productForm.ProductName.$invalid &&  productForm.ProductName.$touched"