Im currently having an issue where I want to create multiple form inputs with validation. The form elements I want to
create will be up to 100 duplicated fields. To do this I have used ng-repeat as can be seen in this small example below. As you may notice
I have a dynamic model and name for my input. Everything works fine with the one exception of validation.
When I inspect the element in the html the dynamic name has got applied as expected and the first name input is called
test0. As you may know form validation in angular is done using the form name and input name. As my input is dynamically
named it seems to be causing issues as you can see by my error output it doesnt seem to log the error correctly, however,
if I was to hardcode the name as test0 instead of test{{i}} (which in the html inspection is test0) everything would work.
This is an issue as validation on the duplicated inputs is not doable this way and the only way I can think of resolving this
is outputting 100 html input elements manually with the only difference being the name of each input. This is not Ideal and I was
wondering if anyone knows a way around this issue or if it is a known bug with Angular? Quite possibly I could just be doing something stupid.
<ng-form name="testform">
<div ng-repeat="i in [0,1,2]">
ERROR {{testform.test0.$error}}
<label>
TEST<br />
<input name="test{{i}}" ng-model="$parent.test[i]" type="text" required />
</label>
</div>
Any help with this matter would be greatly appreciated as I have spent a considerable amount of time trying to resolve this issue.
Thanks.
Related
I found myself having trouble trying to access an input from the label, when the label wraps around the input. It looked like an easy problem to solve, but I'm having a heck of a time.
<label htmlFor="termsAgreement">
<input type="checkbox" name="termsAgreement"/>
<p>Here are the terms of use</p>
</label>
I was thinking that the following would work, but had no luck:
getByLabelText('Here are the terms of use', {selector: 'input'});
A small example snippet with a couple tests could be found here:
react-testing-library demo
Looks like I was using the name field rather than the intended id field to locate the associated input.
I am playing around with angular and material for a while now (coming from jquery, it was a little bit an effort). I do understand that it is a pure client based thing, but what is the client without server... in my case I have a datepicker which I want to post back to the server and have no idea how to.
So this is my datepicker:
<md-datepicker ng-model="user.birthdate" md-placeholder="Birthdate" ng-required="true">
</md-datepicker>
It's quite obvious that there is no "name" attribute which would be required to post it.
What I also tried is adding a hidden input field with the same model, but it's also empty on the server:
<input type="hidden" name="birthdate" ng-model="user.birthdate" />
So my ideas to solve it would be either to write a directive for adding the name to the actual input behind the datepicker (which will cause some issues with the date format) or read the data when submitting it to the server and somehow transfer it with the form (e.g. with the hidden field). But I cannot believe that it is so complicated because I assume that I am not the only one with this requirement - and whenever I search I only find stuff like date format issues...
Thanks in advance,
Philipp
I'm building a simple form using AngularJS Messages.
Basically what I want to happen is:
User submits form, all appropriate errors show and prevents
submission
User then completes fields and errors hide one by one after 'focus out' of field ($touched ?)
First point is working fine but I can't figure out the second part, I can't hide the error messages at all afterwards. I'm sure I'm missing something simple but other related questions aren't really helping too much.
Any ideas?
<form name="orderForm"
ng-submit="orderForm.$valid && placeOrder()" novalidate>
<input type="text"
ng-model="orderParams.delivery_address.full_name"
name="fullName" required />
<p ng-message="orderForm.fullName.$error"
ng-if="orderForm.fullName.$invalid && orderForm.$submitted">
This field is required</p>
<input type="submit" value="Submit" />
</form>
For me the problem was solved by adding ngMessgaes to my module dependencies.
I installed had it installed with bower before, but forgot to add it to module dependencies. For some reason it caused no errors. It only prevented my error messages from hiding.
you need to do three things:
1. add a boolean variable in your controller like: "showMessageBox" which is set to true.
2. when you submit you set "showMessageBox" to false.
3. on your message box you put the ng-show directive and bind it to "showMessageBox" variable
I actually just figured this out. I'm using Angular 1.4.2 and it would seem that Angular Messages is now part of the core build which I didn't pick up on before (I'd just forgotten to inject into the angular module), removed the angular-messages.js file (which was probably causing conflicts) and the above code works fine.
Anyone know why the seperate module is still available on code.angularjs.org? - https://code.angularjs.org/1.4.2/
I recently updated angular from 1.1.5 to 1.2.14.
Now the filters in the ng-repeats produce some unexpected behavior:
ng-repeat renders as normal
enter text into filter model input : ng-repeat does not filter
remove text from input and angular adds extra dom elements to the ng-repeat, basically repeating the ng-repeat. The array bound to the ng-repeat does not change though.
repeating steps 2 and 3 causes more elements to be added
I have tried to recreate this in PLUNKR and it works fine. Any idea what could be causing this?
code:
<input type="text" data-ng-model="query" >
<div class="default-add" data-ng-repeat="array in arrays.arrays | orderBy:'name' | filter:{name: query}">
<div class="default-add-image">
<h1>{{array.title}}</h1>
</div>
</div>
The data is valid json, I have tested with mock data and have the same error.
Thanks
Removing the NG-REPEAT from the repeated element and adding it to a parent container solved it.
If it is running in Plunker fine, then most likely the problem lies in your code. Is this a custom filter? If yes, I would start looking there. If not, then I would check if it works properly on artificial data (thinking that the data might be the issue). If this does not work, then look at your data provider. If this works, then look into how you are processing the data.
I doubt that this is Angular's bug. I migrated from 1.0.7 to 1.2.x recently without such problem (there were few, but all fixed easily by following migration guidelines from Angular team).
Hope that helps!
I'm trying to implement a multilingual text input field with a little dropdown button to the left for selecting the language. For instance, when the dropdown menu shows 'de' the text field should be bound to model.multilingualData['de'].someField and so on.
My first approach was to set ngModel to model.multilingualData[selectedLanguage].someField. But when the user selects a different language without filling in the field correctly, no error is set on the form, because the model now points to a different object.
My next idea was to create an entire element directive without ngModel, but then I wouldn't be able to do other validations like ngMaxLength.
I couldn't find anything helpful on the web either. Any idea on how to implement this properly?
EDIT
Here's a little fiddle that illustrates the problem: http://jsfiddle.net/FZ2kg/
Not only that the form appears valid when you switch languages, the previous field value is also deleted, because the model is set to null when the field becomes invalid.
would be nice if you use this awesome external directive for multilanguage!
https://angular-translate.github.io/
I hope it helps
If you need to have form validation for all language variations and you're loading all languages at once in your model, can't you just create an input per language in the form and hide all but the currently selected language?
Here's a fiddle: http://jsfiddle.net/jvl70/w3rstmwd/5/
<form name="myForm">
<div ng-repeat="(lang, value) in model.multilingualData"
ng-show="lang==stuff.currentLanguage">
<ng-form name="innerForm">
<div ng-class="{ 'has-error': innerForm.anything.$invalid }">
<input type="text" name="anything" ng-model="value.someField" ng-maxlength="6"/>
</div>
</ng-form>
</div>
</form>
(At first I tried to use dynamic names for each input but found that the individual field $invalid wasn't available for dynamically named inputs. See this post to get around it: Dynamic validation and name in a form with AngularJS.
As an alternative to ng-form, you could use dynamic names for each input and try one of the custom directives on the link.)
I guess if there were many possible languages, this approach might get slower but it's ok for a few languages.