AngularJS validation issue

Question

I try to validate a form productForm 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>
                <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>
                </div>

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

In this way the problem is: when user touch the ProductName 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 productForm.ProductName.$touched in ng-if of error message for do it, but it doesn't work, How can I do it?

To understand what's going on do this: `
` – developer033 Jul 31 '16 at 16:09 — developer033, Jul 31 '16 at 16:09

Martin Brandl · Accepted Answer · 2016-07-31T16:16:32.797

0

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

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

edited Jul 31 '16 at 16:16

answered Jul 31 '16 at 16:00

Martin Brandl

56,134
13
133
172

It isn't the answer. `ngShow` and `ngIf` both works for this case (even if `ngShow` shouldn't be used in any case). – developer033 Jul 31 '16 at 16:06
@developer033 Why souldnt ngShow used in any case? The solution is to omit the dirty check and the note, that I would use ng-show was just a hint. But maybe you can convince me... – Martin Brandl Jul 31 '16 at 16:10
Well, `ngShow` is considered a bad practice. `ngIf` is the recommended, but you can use `ngShow`. What I'm pointing here that his problem isn't with `ngIf`. – developer033 Jul 31 '16 at 16:13
Thats right, the problem isn't related with ngIF and its probably save to use there so I will remove the hint. However, please tell us why ngShow is bad practice? I more often see ppl prefer to use ngShow over ngIf.... – Martin Brandl Jul 31 '16 at 16:16
1

You can check the accepted answer [**here**](http://stackoverflow.com/questions/21869283/when-to-favor-ng-if-vs-ng-show-ng-hide). Besides `ngIf` seems to have a better performance, you can manipulate classes easier and so on.. – developer033 Jul 31 '16 at 16:20
@MartinBrandl thanks for your answering, it works, can u explain me why my way doesn't work? and what is the problem. thank u very much – pmn Jul 31 '16 at 16:21
ng-dirty class tells you that the form has been modified which it doesn't if you just focus it and leave it... – Martin Brandl Jul 31 '16 at 16:37

AngularJS validation issue

1 Answers1