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
Related
I have the following code:
<input class="form-control"
uib-datepicker-popup="dd.MM.yyyy"
ng-readonly="!isEditable"
datepicker-append-to-body="true"
ng-model="logicalDepotVo.rtCreationDate"
is-open="isDatepickerOpen"
placeholder="Enter Creation Date"
ng-click="isEditable ? onCreationDateDatepickerClick() : ''"/>
The value does not view value of model, but bind model works as ng-model. When I removed uib-datepicker-popup, all works fine. I tried to remove custom format, play with other attributes, but have no any successful result. Maybe, somebody has an idea what should be done?
Probably this could explain your issue (check you ng-model for correct date format):
ng-model - The date object. Must be a Javascript Date object. You may use the uibDateParser service to assist in string-to-object conversion.
angularjs bootstrap
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/
If you read following Angularjs validations, you understand that:
Message will appear if user interacted and did not fill the date manually.
The problem is when date is filled using the datepicker the input is not recognized by Angularjs and still consider $invalid true, so the message remains there which is confusing/problem although date is already filled using datepicker!
<div class="form-group" ng-class="{ 'has-error' : AddForm.Birthdate.$invalid && !AddForm.Birthdate.$pristine }">
<input type="text" required data-provide="datepicker" class="form-control" name="Birthdate" ng-model="Birthdate" />
<span ng-show="AddForm.Birthdate.$invalid && !AddForm.Birthdate.$pristine" class="help-block" >
Birthdate is required.
</span>
</div>
You can either validate it prior to form submit, or else hook a listener on your datepicker to manually set the model property Birthdate value.
It seems bootstrap datepicker is built on top of JQuery datepicker, manually setting the value would be a bad practice you can refer to:
Update Angular model after setting input value with jQuery
a better approach would be to use some built-in angular component such as the ones from:
https://angular-ui.github.io/bootstrap/
http://dalelotts.github.io/angular-bootstrap-datetimepicker/
https://github.com/dalelotts/angular-bootstrap-datetimepicker
I discovered a new way for this problem-
First of all create an id for that input box and then create a function say $scope.assign(), which simply assign the id value to the model of that input.
Something Like this-
$scope.assign = function() {
$scope.modelValue = $('#idName').val();
}
Now use ng-bind="assign()" to your input box.
It worked for me :)
Was facing the issue, and its because of the picker you are using is built on top of Jquery which remains undetectable by the scope on update.
For my new project I have added another library and its pretty awesome.
See the documentation http://dalelotts.github.io/angular-bootstrap-datetimepicker
Providing the piece of code for which I have added a wrapper directive
My Previous Answer was based on work around and because at that time of answer I was pretty new to the angular and now instead of that I will recommend, not to use an library which is built on top of Jquery in Angular project. Instead prefer angular libraries.
Coming on the topic-
For date time picker I found one very good library
https://github.com/indrimuska/angular-moment-picker
You can find more libraries in built in angular, but I found it pretty useful for other validations too like min-date, max-date validation.
Using this library will solve the issue of validation for sure and its pure Angular way.
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.
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.