angular required message on $error.required OR (pristine AND empty value)
Question
I have searched for a solution all over, so here is my first question to this site:
I am trying to have some nice validation in angular (ionic) page where the logic is I want to show a " Required " message under label when either there is a validation error ( $error.required ) OR the field has not been touched and is empty (like a first time load). I can use pristine to check if it is not been modified, but if the form loads values from the model subsequently (like when restoring from localstorage ), it still shows the " required " validation message.
I have tried the following:
<form name="wdform" novalidate> <label class="item item-input item-stacked-label"> <span class="input-label green-small">ID</span> <div class="validation" ng-show="wdform.userid.$error.required || (wdform.userid.$pristine && wdform.userid.length < 1)" > Required </div> <input name="userid" ng-model="input.UserID" type="text" required> </label> ... rest of form... </form>
<div class="validation" ng-show="wdform.userid.$error.required || (wdform.userid.$pristine && input.UserID.length < 1)" >
and various other permutations such as:
(wdform.userid.$pristine && input.UserID == '') (wdform.userid.$pristine && wdform.userid.$invalid) etc. ad nauseum.
On a separate but related note, I have also found that the built in validation is pretty brittle when it comes to form and field names... it only seems to work at all if the form name is only lowercase and/or contains no special characters (" DumbForm " and " dumb-form " fails, but " smartform " works).
Anyway, does anyone have any thoughts?
3 answers
solution1
0 2015-10-27 15:09:04
I feel like your two scenarios, (1) $error.required and (2) pristine and empty, might be redundant. Anytime #2 would be true, so would #1. I think you could use just #1.
Look at this example: http://plnkr.co/edit/PgQ3vEIOKkfA38dDWjhp?p=preview
<body ng-controller="myController as vm">
<h1>Hello Plunker!</h1>
<form name="wdform">
<input type="text" name="userid" ng-model="userId" required/>
<div ng-show="wdform.userid.$error.required">Required</div>
</form>
</body>
However, it sounds like you are populating your form on page load some times from localStorage and somehow this is not causing the $error.required property to be changed to true, but it should. So your real problem I think lies in need to call $scope.$apply() or something to tell angular to run validations again.
solution2
0 2015-12-18 18:55:37
I found that the issue was related to where the validation div was placed.
If the validation div was placed before the input field (so that it displayed the validation message beneath the field label), I encountered the error specified in this question.
By placing it after the input tag, it works as expected (with the validation message beneath the input field).
I would consider this a bug either in Angular or Ionic. Hopefully it will be corrected in the upcoming version 2 of both.
solution3
0 2022-05-20 15:56:16
<button type="button" class="close" data-dismiss="modal" aria-label="Close" (click)="f3.form.reset()">
Just add the click in the button.so form loads values from the model in reset().Once click the button form will reset. You get new form with no errors.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.