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.
Related
I'm using ng messages module for my validation purpose, I have two input fields. I need to check whether both the input boxes have 0 as its value. It should not allow user to save form, if both the input fields have 0.
How can I achieve this using ng-messages module?
<input class="form-control" type="text" name="text1" ng-model="text1">
<input class="form-control" type="text" name="text2" ng-model="text2">
What I need is, invalidate the form if both of these text boxes have value as 0 at the same time.
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 a situation where I need to escape the following string to be used as the preloaded value for an input field. I would usually use data-bind-html but this doesn't show in the input box.
Here is my string:
"Website Design & Development"
and currently my input field is as follows:
<input class="form-control" type="text" ng-model="group.name" required>
When I use mg-model, it populates the input form value fine, but when I use the following:
<input class="form-control" type="text" ng-bind-html="group.name" required>
Am I doing this correctly or can someone see where I am going wrong? I would ideally like a way to escape the html entities in the controller before it gets shown in the view but I am not sure if this is possible?
Thanks
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}}
I am not seeing the ng-invalid class applied when I type into the field a string like abc. The ng-pattern works if i test it on the console...but not in angular.
<input type="number"
step=".05"
ng-pattern="/^\d{0,}\.{0,1}\d{0,}$/"
ng-model="someNumber">
#musically_ut's plnkr in the comments works for Firefox—i.e. the input element gets class ng-invalid for string abc—but not for Chrome.
For Chrome, it works for me if I add the required attribute, i.e.
<input type="number"
step=".05"
required
ng-pattern="/^\d{0,}\.{0,1}\d{0,}$/"
ng-model="someNumber">