I am aware of how to use Angular's date pipe with typical string interpolation examples and/or for loops. However, I have a situation that's different than both these scenarios - where I've created a kind of custom two-way binding in my Angular 2 app.
This is what my template code looks like:
<input class="app-input [(inputModel)]="staff.profile.hireDate" placeholder="None"
[field-status]="getPropertyStatus('profile.hireDate')"/>
Is there a way I can pass the date pipe in here? I've tried passing it in like this:
<input class="app-input [(inputModel)]="staff.profile.hireDate" placeholder="None"
[field-status]="getPropertyStatus('profile.hireDate') | date"/>
... but that doesn't work. It doesn't throw an error, it just doesn't modify the date formatting. I also tried wrapping the whole expression in brackets - and that through an error.
Is there a way I can pass the date pipe here in the view, or do I need to handle this differently - for instance as part of a function in my component? Looking for the simplest solution here.
One way to use the interpolated value instead of the binding:
<input class="app-input [(inputModel)]="staff.profile.hireDate" placeholder="None"
field-status="{{getPropertyStatus('profile.hireDate') | date}}" />
Related
I am trying to pass an attribute in angular to my directive as a string something like
<custom-directive an-attribute="10/10/10"></custom-directive>
however when i try to access an-attribute it does the math operation and outputs 0.01. How can I prevent the attribute from doing the math operation?
Are you using an # or an = binding?
If using an # binding, an-attribute="10/10/10" should work as is. This may be what you want.
If using an = binding, an-attribute="'10/10/10'" should do the trick.
I'm using ng-tranlate for i18n.
I'd like to combine a translated label together with a variable resolved from controller binding. How can I achieve the following?
<div translate="my.lang.text">some more: {{controller.attribute}}</div>
This does not work, and ng-translate ignores any content between the divs. why?
The translate directive will replace the content of the element with the translation you pass to it.
The use case you are describing looks like a parameterized translation. If you want to keep the use of the directive, you could pass the variable through the translate-values directive:
<div translate="my.lang.text"
translate-values="{value: 'some more: ' + controller.attribute}"></div>
You have to specify that your translation is parameterized:
JSON
"my.lang.text": "This is a parameterized string {value}"
I believe the translate directive replaces all the element's content with the translation.
In this case, you probably want to use the translate filter instead.
<div>{{'my.lang.text' | translate}} some more: {{controller.attribute}}</div>
As an alternative, you could also avoid this issue by giving the translated value it's own element.
<div><span translate="my.lang.text"></span> some more: {{controller.attribute}}</div>
If the translation is always intended to have have a value appended to it, then using a parameterized translation is probably the best solution (as suggested by Michael https://stackoverflow.com/a/33419608/90305)
I want to have a string that goes through angular's filter as a parameter for a javascript function. Angular doesn't parse it, how do I fix this?
<input type="text" ng-required="true" ng-model="foobar"
oninvalid="this.setCustomValidity({{ 'String' | myfilter }})">
The {{ .. }} does not go through Angular's parsing. If I remove the double quotation marks it still doesn't work as Angular 'fixes' it to be oninvalid="this.setCustomValidity("{{
Also, if there is another, more angular way of customizing the browser validation message, that would do the trick for me also.
You might want to read the angular documentation for input, in particular the example plunker provides the solution to your question.
If you still want a hint on what to do to use a filter in your argument please provide information about your oninvalid directive.
You can pass foobar directly
oninvalid="this.setCustomValidity({{ 'String' | myfilter(foobar) }})"
I have the following code:
<input type="date" name="dat" ng-model="dat" placeholder="date">
<h3>Date: {{dat | date:'fullDate'}}</h3>
{{1288323623006 | date:'fullDate'}}
The first interpolation shows nothing no matter what I type in the input element, but the second interpolation displays the date as it should. I'm using angular 1.4.5 and I don't have this problem when I use angular 1.2.x. I'm guessing I missed some update regarding the date filter, but I can't seem to find any mention of this on google.
I also don't have this problem (even with angular 1.4.5) when I change the type of input element to number.
I was a bit hasty to post my question. The thing that I didn't realize was that from version 1.3 the validator is no longer a part of the parser/formatter pipeline and since I'm entering numbers and not valid dates the model is never updated.
I'm using the following filter inside a h3:
{{ event.date | date:'dd-MM-yyyy' }}
And is working just fine, the angular is formatting and showing the date like I want. I'm trying to apply the same filter inside an ng-model:
ng-model="event.date | date:'dd-MM-yyyy'"
And this is not working, is throwing an error:
Error: ngModel:nonassign
Non-Assignable Expression
Expression 'event.date' is non-assignable. Element: {1}
Could you someone explain me why?
Thanks!
That is not possible the way you are trying to do.
An alternate solution will be using input masking. There are some libraries available already for the task such as ngMask and angular-input-masks.
https://github.com/candreoliveira/ngMask
https://github.com/assisrafael/angular-input-masks
From the documentation:
The ngModel directive binds an input,select, textarea (or custom form
control) to a property on the scope
https://docs.angularjs.org/api/ng/directive/ngModel
ng-model needs a variable that it can 2-way data-bind to but the filters output is not assignable.