I have a few requirements for validating a form, and my attempts have been unsuccessful.
The form should validate as you fill it out. The md-input-container should be invalid if the validation requirements fail and the associated ngMessage should show. For example, if an input is marked as required it should turn red and show the message if you click into it and then move focus without typing anything.
The inputs should also be invalid if the form is submitted and they fail validation.
Here is what I've tried:
<md-input-container md-is-error="jac.application.$invalid && (jac.application.$submitted || jac.application.$dirty)" flex="20">
<label>Last Name</label>
<input type="text" name="last_name" ng-model="jac.application_object.last_name" required />
<div ng-messages="jac.application.last_name.$error">
<div ng-message="required">This is required.</div>
</div>
</md-input-container>
Using the above, submitting the form without entering anything has the desired effect; however, entering something valid into the input afterwards ONLY clears the ngMessage (the container is still red).
Also, the form doesn't validate as you fill it out.
Any suggestions on how I can achieve this?
Related
I'm trying to learn forms in AngularJS 1.x. But I have error messages that are always on when it first loads. How to develop behaviour such that they are blank on load, and only red after a submit if fields were not entered? Seems to be a few states I have to use the built-in directives for.
All the elements are similar so let's just take apart this bit. Also if different for a radio and dropdown list maybe we can discuss that too.
<p>First Name:<input type="text" id="firstName" ng-model="firstName" required/>
<span style="background-color: red" ng-if="identification.firstName.$error.required">The first name is required.</span>
</p>
Do I chain a few directives with || or && ?
Behaviour I'm aiming for
How to keep the error messages off when it loads?
when I hit submit, and a field is blank, will it then activate the css red error messages?
I'd like the error messages to clear as I fill in the form without reloading.
Yeah, so any tips greatly appreciated. Doesn't have to be particularly pretty
Thanks
UPDATE 1
gist of current code
Well I took a stab at it. Still really a hot mess at this point. Don't know how to use submit to test for each field and then display the error message if blank. Also seems like a lot of duplication on the testing of field states. Is there a better way to break up that logic? Ugggghhhhh
UPDATE 2
This one's weird, the form now has all text boxes not buttons or checkboxes!? But the HTML hasn't changed. Sigh
ng-if="identification.firstName.$error.required && !$pristine"
Go search more on $pristine and $dirty validator
You can add some other property to your ng-if and set its value to true only when form is submitted.
in your html add this new property
<p>First Name:<input type="text" id="firstName" ng-model="firstName" required/>
<span style="background-color: red" ng-if="identification.firstName.$error.required && running">The first name is required.</span>
</p>
in your controller set this property to true when form is submitted
$scope.submit = function(){
$scope.running = true;
...
}
I'm having a problem with an md-input-container when I have two validations applied to my input tag. I'm using ng-model-options="{ updateOn: 'blur' }", but the problem occurs even without it. For example:
<md-input-container>
<label>Description:</label>
<input name="description" ng-model="list.description" type="text" ng-minlength="3" required />
<div ng-messages="listForm.description.$error">
<div ng-message="minlength">List description is too short</div>
<div ng-message="required">List description is required</div>
</div>
</md-input-container>
If I type "Te" and then press TAB, the ng-minlength validation message shows. But if then I leave the input empty, the required message does not shows (but the input is decorated, as it should be).
The same behavior is reproductible here (https://material.angularjs.org/latest/demo/input). In the Erros -> Description input, if I type more than 30 characters then empty the input, the message is not shown. But if I type a correct value and then empty the input, the message shows.
In my opinion minlength and required is kind of same thing. So you must either one of them. See the for the example link.
http://codepen.io/next1/pen/PNjdBz
Even if you don't specify ng-minlength in input it will show error in ng-message because it is the same thing. So I think you should use ng-message-exp to check both the condition. And the link you refered to material design docs in releated to maxlength and required while you are looking for minlength and required.
This is a known problem with Angular Material and ngMessages.
Subscribe to the following issue if you want to be notified about any progress. I do the same...
https://github.com/angular/material/issues/6767
If you must solve this immediately then you can make use of the workaround described over there but bear in mind that it's not aesthetically perfect.
Like others, I have been looking for a good way to validate my forms with Angular without the messages being too aggressive. The closest I have gotten is checking for $dirty and $touched prior to firing the messages. Which works for most situations.
The one situation I can't figure out is when the user edits, for example, a required field. The field has text in it, is valid, dirty, and touched. The user goes back into the field to change it. They backspace what is in the input and immediately the message fires because the input is now dirty, touched, and invalid. I'd rather it "reset" at that point and reevaluate when the user blurs the input again. Give them a chance to fill in the input while it's still focused.
Make sense? Any ideas?
Thanks!
Matt
Perhaps this works:
ng-model-options="{ updateOn: 'blur' }"
Add it to your input element. I believe the validation will occur when the model is updated, this way the model gets updated on blur.
Here you can see more options for this directive: https://docs.angularjs.org/guide/forms in Custom model update triggers. And a more detailed explanations in ngModelOptions.
Let me know if it works :)
Use function on ng-blur to validate and show messages if invalid.
ng-blur="validate()"
In your controller -
$scope.validate = function(){
//Validate logic
//If invalid
//Show message logic here
}
Take a look at the ngMessages documentation:
https://docs.angularjs.org/api/ngMessages/directive/ngMessages
You have an example there that shows you how to use it:
<form name="myForm">
<label>
Enter your name:
<input type="text"
name="myName"
ng-model="name"
ng-minlength="5"
ng-maxlength="20"
required />
</label>
<pre>myForm.myName.$error = {{ myForm.myName.$error | json }}</pre>
<div ng-messages="myForm.myName.$error" style="color:maroon" role="alert">
<div ng-message="required">You did not enter a field</div>
<div ng-message="minlength">Your field is too short</div>
<div ng-message="maxlength">Your field is too long</div>
</div>
</form>
I think this is the best way to do it (at least it's how I do it).
I create an AngularJS App without < form >. But there is input field.
One of my input field is number.
<input type="number" class="input numberfield" placeholder="0" ng-change="changePrice()" ng-model="price" ng-pattern="/^(\d)+$/" name="price" required />
Now how I show the error message without from name?
<input type="number" class="input numberfield" placeholder="0" ng-change="changePrice()" ng-model="price" ng-pattern="/^(\d)+$/" name="price" required />
<span class="red" ng-show="price.$error.pattern">The price must be given in number format!</span>
When I type some any character inside the field, it show ng-invalid ng-invalid-number tag in input class (screenshot 1). When type some number it's show ng-valid class (screenshot 2). So my code is works.
But problem is that my error message does not work.
I follow this tutorial: http://codepen.io/astockwell/pen/JyCva
But I don't have form tag
screenshot 1 - ng-invalid-number
screenshot 2 - ng-valid-number
Any idea?
Add a form tag.
Angular's validations only work when you have a form tag. You already know your problem is that you don't have a form tag, so add one.
If you can't add a form tag (like there's already some parent form tag somewhere), use ng-form instead, since you can nest those.
My app uses a modal dialog with a simple input element
<input id="fieldEmail" class="form-control" type="text" ng-model="email" required="" />
email: {{ email }}
While the modal is being displayed, I can type something into the input field and see it echoed in the text beside it, as expected. But if I change the input type to type="email" it breaks the data-binding. Input is no longer echoed.
Has anyone else encountered this problem?
it will echoed only if input field has valid email.so put valid email in to input field and check it is working or not.this is because when type="email" ng-model only take valid email value,else it will undefined.
This is because of the type "email". Even if we use type='number', then also the 'ng-model' will be undefined unless you enter some valid number in the text box. For all the HTML5 input types we should give the valid inputs to assign value to ng-model.
And even when we use regular expressions for text boxes, the ng-model will be undefined until we give a value which satisfies the regular expression.
'http://plnkr.co/edit/G2RlzO4q1zKEPP0T8xvF?p=preview`
<body>
<h1>Hello Plunker!</h1>
Enter 3 to 12 characters only.
<br/>
<input type="text" ng-model="name" ng-pattern="/^[a-z]{3,12}$/"/>
<br/>
{{name}}