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.
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 am not able to type anything into the below input text, which has been created using reactjs
<input type="text" id="txtName" className= "form-control" value=""/>
and the equivalent html code in browser is as below
<input id="txtName" class="form-control" value="" data-reactid=".0.0.0.1.0.1.0.1.1" type="text">
I am not able to fix this for some time, finally I changed the data-reactid attribute manually in the browser.
After I changed the value of data-reactid manually in the browser, I am able to type characters into the input field.
I have many other screens with text input field, which has no such issues.
how to fix this issue? why this issue occurs, I mean what's the issue with data-reactid attribute?
When using "value" you're telling React this is a controlled component, that is, the input is set programatically.
Just remove the value field and you're good to go.
Reference
https://facebook.github.io/react/docs/forms.html
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 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?
I have the following code
<div class="form-group" show-errors ng-show="contact.ContactType === 'LegallyMarriedSpouse' || contact.ContactType === 'Self'">
<label class="control-label">Social Security Number</label>
<input type="text" class="form-control" ng-model="contact.SSN" ui-mask="999-99-9999" name="SSN" maxlength="50" required />
</div>
I would have thought that Angular would have made sure that the hidden field was no longer required however that is not the case. although the user can't see it it's clearly still stopping the form from being submitted because I see the following error in the console.
An invalid form control with name='SSN' is not focusable.
So - the question is how do I handle this? If it's displayed I want it to be required if not obviously we can't try and force the user to fill out the values.
2 solutions:
use ng-if rather than ng-show to remove the input from the form rather than hiding it
instead of required, use ng-required="contact.ContactType === 'LegallyMarriedSpouse' || contact.ContactType === 'Self'" to make it required only when the condition showing the field is true. You should put that complex condition in a scope function though, to avoid duplicating it.
Note however that even if the form is invalid, it can still be submitted, unless you're explicitely preventing it by disabling its submit button when the form is invalid. I don't think the error you're seeing has anything to do with the form being invalid.
Also note that the second solution will only deal with the field being required. If the value inside the field is too long or doesn't match with the mask, the field will stay invalid. So you should probably use the first solution.